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>
评论前必须登录!
注册