CODEWITHSUNDEEP
htmlpolymerweb-componentshadow-dom
ThomasReggi
ThomasReggi

Reputation: 59475

How can I have a web components width and height be inherited by its children?

I have this button, that is a web component bootstrap-social. I would like to set its display:inline so that the button ends when its inner text ends. As you can see in the image its height and width are both 0, I would like for the custom element's dimensions be the same as it's children's. How is this possible?

<bootstrap-social style="display: inline;"> Has no effect.

enter image description here

Upvotes: 8

Views: 5436

Answers (1)

CletusW
CletusW

Reputation: 3980

Use style="display: inline-block;" instead. Custom elements by default are display: inline;.

Note: If you're using Shadow DOM, you can do this from within your shadow using :host:

#shadow-root
  <style>
    :host {
      display: inline-block;  /* or display: block; */
    }
  </style>
  <!-- ... -->

If you don't, users of your element will see 0px by 0px as the size, as shown in the OP's image, which is probably not desirable.

Upvotes: 16

Related Questions