Polymer Shadow DOM 和样式

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

请看一个简单的 HTML 示例

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

现在看看 Shadow DOM 的用法。 它允许用户在作用域子树中定位子元素，该子树称为影子树。

阴影根位于影子树的顶部，并且附加到影子树的元素称为阴影宿主。 此阴影宿主包含一个名为 shadowRoot 的属性，该属性指定阴影根。

Shadow DOM 和组合

如果在 Shadow DOM 中有一个元素，您可以通过将 <slot> 元素添加到影子树来呈现该元素的子元素。

例如，使用以下影子树作为 <header-demo>。

将子元素添加到 <my-header> 元素，如下所示

header 用上面指定的子元素替换 </slot> 元素，如下所示

如果未为该插槽分配任何节点，则会显示回退内容。

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