这篇文章假设您已经掌握了DOM以及与DOM操作相关的JS部分。文中的代码符合ES6语法。
一个网页会形成一颗DOM树,树上有很多结点,但过多的结点使结构复杂起来,Shadow DOM允许我们用封装的方式简化这种结构。Shadow DOM是网页DOM树上的特殊结点的结构,这个结点内部同样可以包含一颗DOM树,不过在网页DOM树上只会看到Shadow DOM的根节点。如<video>标签实际上运用了Shadow DOM来包含一系列组件。
let shadow = elementRef.attachShadow({mode:'open'});
配置参数可选open或closed,用参数决定Shadow DOM是否可在JavaScript内访问。open模式下,elementRef.shadowRoot返回shadowRoot,而closed模式下返回null,因此如果使用closed模式,需要在建立ShadowDOM时保存引用(如上)。
获取到ShadowDOM的引用(shadow)后发现,shadowRoot也可以像其他DOM元素一样操作,比如设置innerHTML或者append元素等。
ShadowDOM的真正作用在于封装。我们可以使用类包装我们的元素。
//代码来自MDN
class PopUpInfo extends HTMLElement {
constructor() {
// 必须首先调用 super方法
super();
var shadow = this.attachShadow({mode: 'open'});
// 元素的具体功能写在下面
...
}
}
包装完成后使用以下方式在网页中调用:
customElements.define('popup-info', PopUpInfo);
<popup-info></popup-info>