Shadow DOM简介

这篇文章假设您已经掌握了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>