Javascript 需要帮助理解阴影DOM吗

在阅读有关Shadow DOM的文章和教程时，我遇到了一个让我有点困惑的描述：

影子DOM是指浏览器能够将DOM元素的子树包含到文档的呈现中，而不是包含到主文档DOM树中

---

所以阴影树不是DOM树的一部分？但是浏览器仍然会看到它并呈现它的内容？

看起来这句话出自这篇题为：

影子DOM是DOM的一部分（但虚拟DOM是DOM的隐藏副本。很抱歉之前对虚拟DOM的混淆！）。再次回顾一下，似乎影子DOM只是一个可重用的DOM片段。浏览器将看到并呈现其内容

本规范描述了一种将多个DOM树组合成一个层次结构的方法，以及这些树在文档中如何相互作用，从而实现更好的DOM组合

这项技术至少从2006年开始出现，当时我开始在JavaScript中使用.innerHTML和模板来构建可重用的DOM片段。这不是新技术。W3C只是在2015年将其作为官方规范记录在案

有趣的是这些CSS属性&伪选择器，它们在shadowdom上运行，但不是真正DOM的一部分。它们在的底部进行了描述

：：阴影伪元素

/deep/combinator，被替换为>>> 组合器（或阴影穿透后代组合器）

：：内容伪元素

：host伪类和：host（）函数伪类

：host-context（）函数伪类

它们添加到这些选择器中，人们有时使用这些选择器创建带有插入符号/指向屏幕上其他元素的指针的

标记：

：：在

之前和

：：在

其他更新：

我在link上找到了更多细节。当查看“你好，我的名字是Bob…Shellie”示例（大约在页面下方的1/2处）时，它就在这个文本块的正上方

现在我们已经实现了内容和表示的分离。内容在文件中；演示文稿处于阴影DOM中。当需要渲染某些内容时，浏览器会自动保持同步

。。。我们可以检查DOM&看看影子DOM是什么样子。看起来是这样的，CSS和HTML都可以封装在一个“shadowDOM”元素中，这个元素隐藏在

标记中。见：

这个想法似乎是要封装CSS和HTML，这样它就不会溢出到页面的其他区域。也不允许其他现有/页内代码影响封装代码块的内部内容。这种封装的老例子是隐藏的

标签，其设计目的是显示广告，但阻止第三方广告代码破坏我们真正酷的网页上的JS

以下是更多的阴影DOM链接：

根据规范

文档树是根节点为文档的节点树

任何元素都可以承载零个或一个关联的节点树，称为 阴影树

阴影主体是承载一个阴影树的元素

阴影根是阴影树的根节点

树的树是节点树的树

然后，是的，阴影树在文档树之外，但它们仍然链接在一起，形成一棵树

是的，将渲染阴影内容，而不是元素的后代，如中所定义：

元素上最近创建的阴影树是活动的 该元素的阴影树

阴影主机的子体不得在中生成框 格式化树。相反，活动阴影树的内容 生成框，就像它们是元素的内容一样

---

我认为理解shadow DOM最简单的方法是通过示例：

哦，天哪，我现在更糊涂了。阴影dom与虚拟dom不同，对吗？我指的是作为Web组件一部分的影子dom：影子dom是虚拟dom。只有2个：“可见”DOM和“隐藏”DOM。浏览器只渲染可见的DOM（我们通常看到），而不渲染隐藏的DOM。这些术语是可互换的，容易混淆。真实=可见=可见。阴影=虚拟=隐藏。这有用吗？或者我需要编辑我的答案以使其更清晰？我不知道ReactJS，但它的“虚拟DOM”似乎与shadow DOM完全不同。我想你会更让人困惑，shadow DOM和react并不完全是一回事。有相似之处，但你没有清楚地展示它们。我的印象是一样的，虚拟DOM和影子DOM是不同的。我熟悉Reactjs和虚拟DOM。但我认为影子DOM与虚拟DOM是分开的。影子DOM是用于封装目的的东西。我对这一切都不熟悉，所以很可能我错了。我的想法是浏览器渲染的树隐藏在自定义元素后面。一个很好的例子是视频标签，许多控件可以通过div和按钮实现，但作为用户，您无法访问这些内部构件。内部表示形式不可用于自定义组件外部的代码，除非通过影子DOM或自定义方法公开它。是的，shadow DOM并不是树的一部分，从调用方的代码l的角度来看，它隐藏在实现后面，这就是整个要点。Dimitri Glazkov的文章仍然是shadow DOM的一个很好的解释者