HTML 中的影子 dom

Question

我最近听说过 Shadow DOM。在观看有关 Angular 2 发布的视频时，演示者反复提到 Shadow DOM，但没有明确表达。 Shadow DOM 的真正含义是什么？

Answer 1

我找到的最好的解释是来自What the Heck is Shadow DOM?，如下所示：

Shadow DOM 是指浏览器包含子树的能力 将 DOM 元素放入文档的呈现中，但不放入 主文档 DOM 树。

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

因此，虽然它存在于 DOM 中，但它隐藏在呈现它的页面中。因此，要查看 Shadow DOM，您可以在 Chrome 的开发工具下启用它。

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

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

Shadow DOM 是 Web Components 的一种技术（虽然每个都可以单独使用）：

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

见Introduction to the Shadow DOM。

Answer 2

将影子 DOM 视为封装的（私有）DOM。 您无法以访问常规 DOM 的方式访问影子 DOM，例如“document.querySelector()”。

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

现在，DOM 下（现在称为“宿主元素”）已经变成了影子 DOM 子树（在影子根下），对父结构隐藏了！

希望对你有所帮助。

Answer 3

它指的是从页面的其余部分创建一个完全沙盒化的“子”DOM 的能力。对于 web 组件很有用，可重用的“小部件”允许不用担心他们的 css/js 会影响他们不应该影响的东西。 http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

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