这篇文章假设您已经掌握了DOM以及与DOM操作相关的JS部分。文中的代码符合ES6语法。

Shadow DOM是什么

一个网页会形成一颗DOM树,树上有很多结点,但过多的结点使结构复杂起来,Shadow DOM允许我们用封装的方式简化这种结构。Shadow DOM是网页DOM树上的特殊结点的结构,这个结点内部同样可以包含一颗DOM树,不过在网页DOM树上只会看到Shadow DOM的根节点。如<video>标签实际上运用了Shadow DOM来包含一系列组件。

Shadow DOM的用法

向普通元素附着Shadow DOM

let shadow = elementRef.attachShadow({mode:'open'});

配置参数可选open或closed,用参数决定Shadow DOM是否可在JavaScript内访问。open模式下,elementRef.shadowRoot返回shadowRoot,而closed模式下返回null,因此如果使用closed模式,需要在建立ShadowDOM时保存引用(如上)。

改变Shadow DOM的内容

获取到ShadowDOM的引用(shadow)后发现,shadowRoot也可以像其他DOM元素一样操作,比如设置innerHTML或者append元素等。

封装Custom Element

ShadowDOM的真正作用在于封装。我们可以使用类包装我们的元素。

//代码来自MDN
class PopUpInfo extends HTMLElement {
  constructor() {
    // 必须首先调用 super方法
    super();
    var shadow = this.attachShadow({mode: 'open'});
    // 元素的具体功能写在下面

    ...
  }
}

包装完成后使用以下方式在网页中调用:

customElements.define('popup-info', PopUpInfo);
<popup-info></popup-info>