CSS Width with Custom Tags

Question

I am unable to get the width and heigh properties to work for my custom tags please see code below: CSS

 x-slider
 {
    width: 1000px;
    height: 300px;
    border: 1px black solid;    
    background-color: #0000ff;
  }

HTML

<body><x-slider id="CoolPics" page="home"></x-slider></body>

Javascript

  var x = document.registerElement('x-slider', {
    prototype: Object.create(HTMLDivElement.prototype), extends: 'div'
});

I added the Extension of the DIV object to see if that would allow me to specify heigh since some tags do not allow for height. Is it only certain css properties that work with custom tags? Both the border and background color show up, I have tried changing over to both min and max height as well. Please limit response to the question and not the subjective argument of whether you should use custom tags, It made it significantly harder to search for answer for this with every post about custom tags overloaded with those kinda of responses.

I'm trying to understand the purpose of you using a "custom tag". — j08691
– j08691, Commented Jul 20, 2014 at 20:50
Custom tags have various purposes especially in api's. They make code easier to follow than having big complicated div structures with lots of CSS on them. If your coding for someone else instead of yourself who doesn't need to know how everything exactly works this can be a huge boon. I only asked for no answers like this because it is a highly subjective and hot argument topic and I wanted others to be able to look up the answer to this question without sifting through the argument posts as I had too. — lvoelk
– lvoelk, Commented Jul 21, 2014 at 12:48

rvighne · Accepted Answer · 2014-07-20 21:20:56Z

6

Add display: block or display: inline-block to x-slider.

edited Jul 20, 2014 at 21:20

rvighne

22.1k11 gold badges53 silver badges75 bronze badges

answered Jul 20, 2014 at 20:50

Sarbbottam

5,6054 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jukka K. Korpela Over a year ago

I think you meant “or display: inline-block”.

Jukka K. Korpela Over a year ago

The reason why this helps is that “custom tags” are by default inline elements (with display: inline).

lvoelk Over a year ago

Thank you I wrongly assumed the having it inherit from a div would take care of this.

Collectives™ on Stack Overflow

CSS Width with Custom Tags

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related