草案
本页尚未完工.
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
,HTMLTemplateElement
andHTMLSlotElement
- CSS 选择器:
- 伪类:
:host
,:host()
,:host-context()
- 伪元素:
::shadow
and::content
- 组合器:
>>>
(formerly/deep/
)*
- 伪类:
* 将来子组合器有可能被弃用
Interfaces
DOM子树的根节点,和文档的主要DOM树分开渲染。
允许访问HTML元素的内容。
定义一个槽的位置。
提供在文档和 Shadow 树之间共享的API。