Polymerjs Shadow DOM和样式

2022-05-04 IT知识 Polymerjs

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>

【Polymerjs Shadow DOM和样式】将子级添加到< 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 = "http://www.srcmini.com/img-demo.png"> < /slot> < slot> < /slot> < my-element>

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

< my-element> < img slot = "myimgicon" src = "http://www.srcmini.com/warning.png"> < my-element>

推荐阅读

上一篇：Polymerjs platinum推送消息

下一篇：Polymerjs教程介绍