MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

影子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由下列部分组成:

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

Interfaces

ShadowRoot

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

HTMLSlotElement

定义一个槽的位置。

DocumentOrShadowRoot

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

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, floraluo, jchnxu
 最后编辑者: xgqfrms-GitHub,