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

Issue

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.

Solution

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.

Answered By - CletusW