HTML中的影子dom

Question

我最近听说过Shadow DOM。在观看关于Angular 2发布的视频时，主持人反复提到Shadow DOM而没有明确的表达。 暗影DOM 真正意味着什么？

Answer 1

我发现的最佳解释来自What the Heck is Shadow DOM?，如下所示：

  

Shadow DOM是指浏览器包含子树的能力   DOM元素进入文档的渲染，但不进入   主文档DOM树。

一个重要的用例是网页上的视频控件。标记仅显示视频标记，包含一些属性和源标记。所有视频操作的附加代码都隐藏在Shadow DOM中，不可用于页面的其余部分。标记的实际标记，javascript和样式被封装，隐藏了每个浏览器供应商已经编写的视频控件的实现细节。

因此，虽然它存在于DOM中，但它隐藏在呈现它的页面之外。因此，要查看Shadow DOM，您可以在Chrome中的Dev Tools下启用它。

简短的回答是，Shadow DOM是构成Web组件的四种技术之一。

对于定义，Web组件是：W3C的组件平台，允许从标准化构建块构建Web站点。 Web组件包括自定义元素，Shadow DOM和HTML导入和模板。

Shadow DOM是一种Web组件技术（尽管每种都可以单独使用）：

1. 自定义元素：是一种用于创建自己的自定义HTML标记和元素的功能。他们可以拥有自己的脚本行为和CSS样式。它们是Web组件的一部分，但它们也可以单独使用。
2. HTML模板：HTML模板元素是一种用于保存客户端内容的机制，这些内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript进行实例化。将模板视为存储的内容片段，以便随后在文档中使用。
3. Shadow DOM：为Web组件中的JavaScript，CSS和模板提供封装。 Shadow DOM使得这些东西与主文档的DOM保持独立。您也可以在Web组件之外单独使用Shadow DOM。
4. HTML Imports：旨在成为Web组件的打包机制，但您也可以单独使用HTML Imports。您可以使用HTML文档中的标记导入HTML文件。

请参阅Introduction to the Shadow DOM。

Answer 2

它指的是创造一个孩子的能力＆＃34; DOM从页面的其余部分完全沙箱化。适用于Web组件，可重复使用的小部件＆＃34;这让他们不必担心他们的css / js会影响他们不应该做的事情。 http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

如果您想查看它，请查看https://www.polymer-project.org/。

Answer 3

将shadow DOM视为封装（私有）DOM。 您无法以访问常规DOM的方式访问shadow DOM，例如'document.querySelector（）'。

假设您定义了一个可重用的自定义元素（包含其DOM树）。然后在应用HTML中使用自定义元素。

现在，DOM（现在称为“主机元素”）已成为阴影DOM子树（在阴影根下），隐藏在父结构中！

我希望这对你有所帮助。