问需要帮助理解阴影DOM

EN

看起来这句话来自于这篇题为：影子多姆是什么？的文章

阴影DOM是DOM的一部分(但虚拟DOM是DOM的隐藏副本。很抱歉之前混淆了虚拟DOM!)。再回顾一下这个W3规范，看起来阴影DOM只是一个可重用的DOM片段。浏览器将看到它&将呈现它的内容。

该规范描述了将多个DOM树组合成一个层次结构的方法，以及这些树如何在文档中相互交互，从而能够更好地组合DOM。

至少从2006年开始使用.innerHTML & JavaScript中的模板来构建可重用的DOM片段以来，这种技术就已经出现了。这不是新技术。2015年，W3C将其作为官方规范记录在案。

有趣的是这些CSS属性&伪选择器，它们在Shadow DOM上运行，但不是Real的一部分。它们在组合树段 of W3规范的底部进行描述。

*影子伪元素 /deep/ combinator，它被替换为>>>组合器(或穿透阴影的后代组合器) *内容伪元素 ：主机伪类和:host()函数伪类 ：主机上下文()函数伪类

它们添加了一些选择器，人们有时会使用这些选择器创建带有插入符号/指向屏幕上其他元素的指针的<div>标记：

::before & ::after

附加更新：

我在阴影DOM 101链接上找到了更多的细节。当查看“你好，我的名字是鲍勃.谢利”的例子(大约1/2的方式下的页面)，就在这个文本块之上.

现在，我们已经实现了内容和表示的分离。内容在文档中；表示在Shadow DOM中。当呈现某些内容时，浏览器会自动保持它们的同步。

..。我们可以检查DOM &看看影子DOM是什么样子。它看起来是这样的，CSS和HTML都可以封装在一个隐藏在<div>标记中的“影子DOM”元素中。请参阅：https://developer.chrome.com/devtools/docs/settings-files/show-shadow-dom.png

它的想法似乎是封装CSS & HTML，这样它就不会溢出到页面的其他区域。也不允许其他现有/页上代码影响封装代码块中的内容。这种封装的老例子是隐藏的<iframe>标记，它被设计用来显示广告，但阻止第三方广告代码破坏我们非常酷的网页上的JS。

下面是更多的影子DOM链接：

1. 阴影DOM 101
2. 阴影DOM 201
3. 阴影DOM 301
4. 可视化阴影DOM概念