Shadow tree

一起看海

一个 DOM 元素可以有以下两类 DOM 子树：

Light tree（光明树） —— 一个常规 DOM 子树，由 HTML 子元素组成。我们在之前章节看到的所有子树都是「光明的」。
Shadow tree（影子树） —— 一个隐藏的 DOM 子树，不在 HTML 中反映，无法被察觉。
如果一个元素同时有以上两种子树，那么浏览器只渲染 shadow tree。但是我们同样可以设置两种树的组合。我们将会在后面的章节 Shadow DOM 插槽，组成 中看到更多细节。

影子树可以在自定义元素中被使用，其作用是隐藏组件内部结构和添加只在组件内有效的样式。

比如，这个 <show-hello> 元素将它的内部 DOM 隐藏在了影子里面：

<script>
customElements.define('show-hello', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<p>
      Hello, ${this.getAttribute('name')}
    </p>`;
  }
});
</script>

<show-hello name="John"></show-hello>

这就是在 Chrome 开发者工具中看到的最终样子，所有的内容都在「#shadow-root」下：


首先，调用 elem.attachShadow({mode: …}) 可以创建一个 shadow tree。

这里有两个限制：

在每个元素中，我们只能创建一个 shadow root。
elem 必须是自定义元素，或者是以下元素的其中一个：「article」、「aside」、「blockquote」、「body」、「div」、「footer」、「h1…h6」、「header」、「main」、「nav」、「p」、「section」或者「span」。其他元素，比如 <img>，不能容纳 shadow tree。
mode 选项可以设定封装层级。他必须是以下两个值之一：

「open」 —— shadow root 可以通过 elem.shadowRoot 访问。

任何代码都可以访问 elem 的 shadow tree。

「closed」 —— elem.shadowRoot 永远是 null。

我们只能通过 attachShadow 返回的指针来访问 shadow DOM（并且可能隐藏在一个 class 中）。浏览器原生的 shadow tree，比如 <input type="range">，是封闭的。没有任何方法可以访问它们。

attachShadow 返回的 shadow root，和任何元素一样：我们可以使用 innerHTML 或者 DOM 方法，比如 append 来扩展它。

我们称有 shadow root 的元素叫做「shadow tree host」，可以通过 shadow root 的 host 属性访问：

// 假设 {mode: "open"}，否则 elem.shadowRoot 是 null
alert(elem.shadowRoot.host === elem); // true