影子DOM（Shadow DOM） - Web Components

草案
本页尚未完工.

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

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

Shadow DOM基础

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

<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>