html - 如何让 Web 组件的宽度和高度被其子组件继承？

Question

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

<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 的图片所示，这可能是不可取的。