diff options
Diffstat (limited to 'files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html')
| -rw-r--r-- | files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html b/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html new file mode 100644 index 0000000000..2037b78ce1 --- /dev/null +++ b/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html @@ -0,0 +1,92 @@ +--- +title: 影子DOM（Shadow DOM） +slug: conflicting/Web/Web_Components/Using_shadow_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 +original_slug: Web/Web_Components/影子_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文件中的一个元素，也可以是脚本中创建的元素；可以是原生的元素，如<div>、<p>；也可以是<a href="/en-US/docs/Web/Web_Components/Custom_Elements">自定义元素</a>如 <code><my-element>。</code> 如下例所示，使用 {{domxref("Element.<code>attachShadow</code>()")}} 来附加影子DOM：</p> + +<pre class="brush: html"><html> + <head></head> + <body> + <p id="hostElement"></p> + <script> + // create shadow DOM on the <p> element above + var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>; + </script> + </body> +</html></pre> + +<p>上例中给一个没有内容的 <p> 元素添加了影子DOM。显示没有变化。接下来，同样在上例中加入下列代码，可以在影子DOM中插入文字，并将在浏览器中显示：</p> + +<pre class="brush: js" style="font-size: 14px;">shadow.innerHTML = '<p>Here is some new text</p>';</pre> + +<h3 id="Shadow_DOM_样式化">Shadow DOM 样式化</h3> + +<p><code><style></code> 元素可用来给影子DOM添加样式。 同样是上例，下列代码会将影子DOM中的文字变为红色：</p> + +<pre class="brush: html"><script> + // 创建 shadow DOM + var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>; + // 给 shadow DOM 添加文字 + shadow.innerHTML = '<p>Here is some new text</p>'; + // 添加CSS，将文字变红 + shadow.innerHTML += '<style>p { color: red; }</style>'; +</script> +</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"><content> 元素</a></li> + <li><a href="/en-US/docs/Web/HTML/Element/Shadow"><shadow> 元素</a></li> + <li>这些元素已从规范中移除： <content>, <element> 和<decorator></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>>>></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> |