草案
本页尚未完工.
Shadow DOM 为Web组件中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。
为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。
Shadow DOM基础
Shadow DOM 必须附加在一个元素上，可以是HTML文件中的一个元素，也可以是脚本中创建的元素；可以是原生的元素，如<div>、<p>；也可以是自定义元素如 <my-element>。 如下例所示，使用 Element. 来附加影子DOM：attachShadow()
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
// create shadow DOM on the <p> element above
var shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'});
</script>
</body>
</html>
上例中给一个没有内容的 <p> 元素添加了影子DOM。显示没有变化。接下来，同样在上例中加入下列代码，可以在影子DOM中插入文字，并将在浏览器中显示：
shadow.innerHTML = '<p>Here is some new text</p>';
Shadow DOM 样式化
<style> 元素可用来给影子DOM添加样式。 同样是上例，下列代码会将影子DOM中的文字变为红色：
<script>
// 创建 shadow DOM
var shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'});
// 给 shadow DOM 添加文字
shadow.innerHTML = '<p>Here is some new text</p>';
// 添加CSS，将文字变红
shadow.innerHTML += '<style>p { color: red; }</style>';
</script>
Shadow DOM 的组成部分：
影子DOM由下列部分组成：
Element.attachShadow()Element.getDestinationInsertionPoints()Element.shadowRoot- <content> 元素
- <shadow> 元素
- 这些元素已从规范中移除： <content>, <element> 和<decorator>
- 相关API接口：
ShadowRoot,HTMLTemplateElementandHTMLSlotElement - CSS 选择器：
- 伪类：
:host,:host(),:host-context() - 伪元素：
::shadowand::content - 组合器：
>>>(formerly/deep/)*
- 伪类：
* 将来子组合器有可能被弃用
Interfaces
DOM子树的根节点，和文档的主要DOM树分开渲染。
允许访问HTML元素的内容。
定义一个槽的位置。
提供在文档和 Shadow 树之间共享的API。