Javascript HTML中的阴影dom

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

它指的是完全从页面的其余部分创建“子”DOM的能力。对于web组件非常有用，可重用的“小部件”可以让您不用担心css/js会影响不应该影响的东西

---

如果您想查看它的运行情况，请查看。

将阴影DOM视为一种封装（私有）DOM。 不能以访问常规DOM的方式访问影子DOM，如“document.querySelector（）”

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

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

---

我希望这能对您有所帮助。

我发现最好的解释如下所示：

阴影DOM指的是浏览器包含子树的能力 将DOM元素转换为文档的呈现，但不转换为 主文档DOM树

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

因此，当它在DOM中时，它从呈现它的页面隐藏。因此，要查看shadowdom，可以在Chrome中的Dev工具下启用它

简而言之，影子DOM是构成Web组件的四种技术之一。

从定义上讲，Web组件是：W3C提供的一个组件平台，允许使用标准化的构建块构建Web站点。Web组件包括自定义元素、影子DOM和HTML导入和模板

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

自定义元素：是一种创建自定义HTML标记和元素的功能。他们可以有自己的脚本行为和CSS样式。它们是Web组件的一部分，但也可以自己使用

HTML模板：HTML模板元素是一种保存客户端内容的机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。将模板视为存储在文档中供后续使用的内容片段

shadowdom：为Web组件中的JavaScript、CSS和模板提供封装。shadowdom使这些内容与主文档的DOM保持分离。您还可以在web组件之外单独使用阴影DOM

HTML导入：旨在作为Web组件的打包机制，但您也可以单独使用HTML导入。您可以使用HTML文档中的标记导入HTML文件

---

看。

到目前为止，你自己试过什么吗？谷歌的“影子DOM”的前三个结果看起来很有希望……这不是谷歌。你得到的任何答案都可能是其他为你做网络搜索的人。。。你应该自己做。MDN文档总是一个很好的起点