聚合物阴影DOM和样式

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

查看一个简单的HTML示例：

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

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

   #shadow-root
   

      

      

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

影子DOM和合成

如果阴影DOM中有一个元素，则可以通过将元素添加到阴影树中来渲染该元素的子元素。

例如，对使用以下阴影树。

   

   Menu

将子级添加到元素中，如下所示：

Shadow DOM

标头将元素替换为上面指定的子元素，如下所示：

   

      
Shadow DOM
      Menu
   

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

   #shadow-root
   
      
   
   

您可以为元素提供自己的图标，例如-