为什么 width: 100% 不适用于本地 dom 托管元素？

【问题标题】：Why doesn't width: 100% apply to local dom hosting element?为什么 width: 100% 不适用于本地 dom 托管元素？
【发布时间】：2015-08-26 01:46:30
【问题描述】：

在这个自定义元素中，width: 90% 在:host 中使用时将不适用，但如果我将其应用于section，width: 90% 将适用。为什么是这样？ portfolio-display 不是一个阴暗的 dom 元素，width: 90% 应该应用在其中，因为它是托管元素而不是 section？

<dom-module id="portfolio-display">
  <style>
    :host {
      height: 60%;
      transition: box-shadow 0.2s ease-out;
     }

     section {
       width: 90%;
       background-color: #5a7785;
     }


    .big {
      height: 100px;
      width: 100px;
    } 
  </style>

  <template>
    <section>
      <div onclick="page('/portfolio')"
        class="vertical layout">
        <div>

【问题讨论】：

可能是使用 :host 上的布局阻止了宽度的应用。它也可能是它的使用方式。可能需要更多信息。
不，没有布局属性也是一样的。
您能提供失败的组件的实现示例吗？

标签： css polymer polymer-1.0 shady-dom

【解决方案1】：

我认为您的:host 上缺少display: block;。

section 有效，因为大多数浏览器显示section 元素与

section { 
    display: block;
}

请参阅此plunker 以获取示例。

【讨论】：

不过，background-color: #5a7785; 也一样。此外，如果我使用布局属性，则存在该行为，这将使我相信显示flex。
嗯，不太清楚你的意思，你看到我链接的 plunker 了吗？显示更多代码，我会看看。
我了解到 Plunker 很少有用，因为 Polymer 元素的版本之间存在差异。例如，在您的 Plunkr 上，我可以在 :host 中设置 background-color: red。这与我的本地 Polymer 上的行为不同，background-color 对此自定义元素的 :host 没有影响。
我可以向你保证，这与依赖无关。最有可能的是，假设 display: 块已经应用，你看不到颜色，因为元素父级的高度/宽度没有定义。