如何让其子组件继承 Web 组件的宽度和高度？答案

【问题标题】：How can I have a web components width and height be inherited by its children?如何让其子组件继承 Web 组件的宽度和高度？
【发布时间】：2014-10-01 08:53:44
【问题描述】：

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

<bootstrap-social style="display: inline;"> 无效。

【问题讨论】：

试试style="display: inline-block;"?
@CletusW 成功了，哎呀！由于某种原因，我忘记了如何使用 CSS。
没问题。我会做出答复，以便您接受。
@CletusW 这是同一个问题吗？这里发生了什么？ stackoverflow.com/questions/25295815/…
不，我只是尝试将display: inline-block（和block，就此而言）放在该问题的元素上，但没有帮助。

标签： html polymer web-component shadow-dom

【解决方案1】：

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

注意：如果您使用 Shadow DOM，您可以使用 :host 在您的影子中执行此操作：

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

如果您不这样做，您元素的用户将看到 0px by 0px 作为大小，如 OP 的图像所示，这可能是不可取的。

【讨论】：