files/zh-cn/web/web_components/影子_dom/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

---
title: 影子DOM（Shadow DOM）
slug: Web/Web_Components/影子_DOM
tags:
  - DocumentFragment
  - React
  - Virtual DOM
  - Web Components
  - shadow dom
translation_of: Web/Web_Components/Using_shadow_DOM
translation_of_original: Web/Web_Components/Shadow_DOM
---
<p>{{ draft }}</p>

<p><strong>Shadow DOM </strong>为<a href="/zh-CN/docs/Web/Web_Components">Web组件</a>中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。</p>

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

<h2 id="Shadow_DOM基础">Shadow DOM基础</h2>

<p>Shadow DOM 必须附加在一个元素上，可以是HTML文件中的一个元素，也可以是脚本中创建的元素；可以是原生的元素，如&lt;div&gt;、&lt;p&gt;；也可以是<a href="/en-US/docs/Web/Web_Components/Custom_Elements">自定义元素</a>如 <code>&lt;my-element&gt;。</code> 如下例所示，使用 {{domxref("Element.<code>attachShadow</code>()")}} 来附加影子DOM：</p>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
    &lt;p id="hostElement"&gt;&lt;/p&gt;
    &lt;script&gt;
      // create shadow DOM on the &lt;p&gt; element above
      var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

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

<pre class="brush: js" style="font-size: 14px;">shadow.innerHTML = '&lt;p&gt;Here is some new text&lt;/p&gt;';</pre>

<h3 id="Shadow_DOM_样式化">Shadow DOM 样式化</h3>

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

<pre class="brush: html">&lt;script&gt;
  // 创建 shadow DOM
  var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>;
  // 给 shadow DOM 添加文字
  shadow.innerHTML = '&lt;p&gt;Here is some new text&lt;/p&gt;';
  // 添加CSS，将文字变红
  shadow.innerHTML += '&lt;style&gt;p { color: red; }&lt;/style&gt;';
&lt;/script&gt;
</pre>

<h3 id="Shadow_DOM_的组成部分：">Shadow DOM 的组成部分：</h3>

<p>影子DOM由下列部分组成：</p>

<ul>
 <li>{{domxref("Element.attachShadow()")}}</li>
 <li>{{domxref("Element.getDestinationInsertionPoints()")}}</li>
 <li>{{domxref("Element.shadowRoot")}}</li>
 <li><a href="/en-US/docs/Web/HTML/Element/Content">&lt;content&gt; 元素</a></li>
 <li><a href="/en-US/docs/Web/HTML/Element/Shadow">&lt;shadow&gt; 元素</a></li>
 <li>这些元素已从规范中移除： &lt;content&gt;, &lt;element&gt; 和&lt;decorator&gt;</li>
 <li>相关API接口：{{domxref("ShadowRoot")}}, {{domxref("HTMLTemplateElement")}} and {{domxref("HTMLSlotElement")}}</li>
 <li>CSS 选择器：
  <ul>
   <li>伪类：{{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}</li>
   <li>伪元素：{{cssxref("::shadow")}} and {{cssxref("::content")}}</li>
   <li>组合器：<code>&gt;&gt;&gt;</code> (formerly <code>/deep/</code>)*</li>
  </ul>
 </li>
</ul>

<p>* 将来<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=489954">子组合器有可能被弃用</a></p>

<h2 id="Interfaces">Interfaces</h2>

<p>{{domxref("ShadowRoot")}}</p>

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

<p>{{domxref("HTMLTemplateElement")}}</p>

<p>允许访问HTML元素的内容。</p>

<p>{{domxref("HTMLSlotElement")}}</p>

<p>定义一个槽的位置。</p>

<p>{{domxref("DocumentOrShadowRoot")}}</p>

<p>提供在文档和 Shadow 树之间共享的API。</p>