Polymerjs Shadow DOM和样式

Shadow DOM是DOM的新属性, 用于构建组件。 Shadow DOM提供了一种将隐藏的单独DOM附加到元素的方法。

查看一个简单的HTML示例：

<header-demo>
   <header>
      <h1>
         <button>

在上面的代码中, 标题组件包括页面标题和菜单按钮。

现在查看Shadow DOM的用法。它允许用户在有作用域的子树(称为影子树)中定位子级。

<header-demo>
   #shadow-root
   <header>
      <h1>
      <button>

阴影根位于阴影树的顶部, 连接到阴影树的元素称为阴影主机。该影子主机包含一个名为shadowRoot的属性, 该属性指定影子根。

影子DOM和合成

如果影子DOM中有一个元素, 则可以通过将<slot>元素添加到影子树中来渲染该元素的子代。

例如, 对<header-demo>使用以下阴影树。

<header>
   <h1><slot></slot></h1>
   <button>Menu</button>
</header>

将子级添加到<my-header>元素中, 如下所示：

<header-demo>Shadow DOM</header-demo>

标头将</ slot>元素替换为上面指定的子元素, 如下所示：

<header-demo>
   <header>
      <h1>Shadow DOM</h1>
      <button>Menu</button>
   </header>
</header-demo>

如果没有节点分配给该插槽, 则显示回退内容。

<my-element>
   #shadow-root
   <slot id = "myimgicon">
      <img src = "img-demo.png">
   </slot>
   <slot></slot>
<my-element>

你可以为元素提供自己的图标, 例如-

<my-element>
   <img slot = "myimgicon" src = "warning.png">
<my-element>