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

Question

在这个自定义元素中，在width: 90%中使用时 将不适用:host，但width: 90%如果我将其应用于section. 为什么是这样？不是应该应用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>

Answer 1

我认为您display: block;的:host.

section工作，因为大多数浏览器显示section元素

section { 
    display: block;
}

有关示例，请参见此 plunker。