Question

我正在寻找一个解释为什么我需要写：host :: shadow，以便我的继承元素在我的基本元素的阴影树中设置样式元素。

在下面的示例代码中，我希望能够为完整元素设置标签样式：

<polymer-element name="my-foo">
  <template>
      <style>
          :host label {
              color: red;
          }
      </style>
  <label>My label: </label>
  </template>
  <script>
     Polymer('my-foo');
  </script>
</polymer-element>

<polymer-element name="my-bar" extends="my-foo">
  <template>
      <style>
          :host label {
              font-weight: bold;
          }
      </style>
      <shadow></shadow>
      <input />
  </template>
  <script>
    Polymer('my-bar');
  </script>
</polymer-element>

<my-bar></my-bar>

http://jsfiddle.net/Lz0Lcrx3/

上面的示例使标签显示为红色但不是粗体。为了解决这个问题，我需要将继承元素的样式更改为include :: shadow。

  <style>
      :host::shadow label {
          font-weight: bold;
      }
  </style>

http://jsfiddle.net/Lz0Lcrx3/1/

我知道我在这种情况下处理了两个阴影根，我猜::阴影是为了确保我们将风格应用于所有这些阴影，但我认为：主持人会被够了。

有人可以提供解释吗？

Answer 1

经过一番搜索后，我发现以下文章我想解释一下： http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/

根据我的理解，<shadow></shadow>插入点将使得必须使用来自另一个shadowDOM树的:: shadow，因为我们实际上是跨越边界。阴影边界，而不是元素边界。

为什么我需要写:: shadow after：host？

1 个答案: