影子DOM（Shadow DOM）

草案
本页尚未完工.

Shadow DOM 为Web组件中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。

为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。

影子DOM基础

影子DOM必须附加在一个元素上，可以是HTML文件中的一个元素，也可以是脚本中创建的元素；可以是原生的元素，如<div>、<p>；也可以是自定义元素如 <my-element>。 如下例所示，使用 Element.createShadowRoot() 来附加影子DOM：

<html>
  <head></head>
  <body>
    <p id="hostElement"></p>
    <script>
      // create shadow DOM on the <p> element above
      var shadow = document.querySelector('#hostElement').createShadowRoot();
    </script>
  </body>
</html>

上例中给一个没有内容的 <p> 元素添加了影子DOM。显示没有变化。接下来，同样在上例中加入下列代码，可以在影子DOM中插入文字，并将在浏览器中显示：

shadow.innerHTML = '<p>Here is some new text</p>';

影子DOM的样式

<style> 元素可用来给影子DOM添加样式。同样是上例，下列代码会将影子DOM中的文字变为红色：

<script>
  // 创建 shadow DOM
  var shadow = document.querySelector('#hostElement').createShadowRoot();
  // 给 shadow DOM 添加文字
  shadow.innerHTML = '<p>Here is some new text</p>';
  // 添加CSS，将文字变红
  shadow.innerHTML += '<style>p { color: red; }</style>';
</script>

影子DOM的组成：

影子DOM由下列部分组成：

Element.attachShadow()
Element.getDestinationInsertionPoints()
Element.shadowRoot
<content> 元素
<shadow> 元素
这些元素已从规范中移除： <content>, <element> 和<decorator>
相关API接口：ShadowRoot, HTMLContentElement and HTMLShadowElement
CSS 选择器：
- 伪类：:host, :host(), :host-context()
- 伪元素：::shadow and ::content
- 组合器：>>> (formerly /deep/)*

* 将来子组合器有可能被弃用

Interfaces

ShadowRoot

DOM子树的根节点，和文档的主要DOM树分开渲染。

HTMLSlotElement

定义一个槽的位置。

DocumentOrShadowRoot

提供在文档和影子树之间共享的API。