如何让网络组件的宽度和高度由其子项继承？

Question

我有这个按钮,这是一个Web组件bootstrap-social.我想设置它,display:inline以便当内部文本结束时按钮结束.正如您在图像中看到的那样,它的高度和宽度都是0,我希望自定义元素的尺寸与它的孩子的尺寸相同.这怎么可能？

<bootstrap-social style="display: inline;"> 没有效果.

Answer 1

请style="display: inline-block;"改用.默认情况下自定义元素display: inline;.

注意:如果您使用的是Shadow DOM,则可以使用:host以下方法在阴影中执行此操作:

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

如果不这样做,你的元素的用户将看到0px通过0px的大小,如图所示,OP的形象,这可能是不可取英寸