什么是影子根

在 Google Chrome 的开发者工具中，我看到一个 #shadow-root就在 <html lang="en">标签下面。它是做什么用的？我在 Firefox 和 IE 中都没有看到，只有在 Chrome 中，这是一个特殊的功能吗？

如果我打开它，它会显示 <head>和 <body>以及旁边名为 reveal的链接，通过单击，它指向 <head>和 <body>，没有其他内容。

70607 次浏览
小开
最佳答案

这是 暗影 DOM存在的特殊指示器。它们已经存在了很多年，但是直到最近开发人员才得到它的 API。Chrome 已经拥有这一功能有一段时间了，其他浏览器仍在迎头赶上。它可以在“元素”部分下的 DevTools 设置中进行切换。取消选中“显示用户代理影子 DOM”。这将至少隐藏内部创建的任何 Shadow DOM (如 select 元素)我不确定它是否会影响用户创建的元素，比如自定义元素。

在 iframe 中也会出现这种情况，在这种情况下，您有一个单独的 DOM 树嵌套在另一个 DOM 树中。

Shadow DOM 只是说页面的某些部分包含其 自己的 DOM。样式和脚本可以作用于该元素的范围，因此在该元素中运行的内容只能在该边界中执行。

这是 Web Components工作所需的主要部件之一。这是一项新技术，允许开发人员构建自己的封装组件，开发人员可以像使用其他 HTML 元素一样使用这些组件。

小开

作为 Shadow DOM 的一个例子，当你在一个网页上有一个 <video>标签时，它在主 DOM 中只显示一个标签，但是如果你启用 Shadow DOM，你将能够看到视频播放器的 HTML (播放器 DOM)。

Shadow DOM

这在本文 http://webcomponents.org/articles/introduction-to-shadow-dom/中得到了很好的解释

小开

在 web 组件的例子中，有一个基本问题使得用 HTML 和 JavaScript 构建的小部件很难使用。

问题 : 小部件中的 DOM 树没有从页面的其余部分封装起来。缺乏封装意味着您的文档样式表可能意外地应用于小部件内部的部件; 您的 JavaScript 可能意外地修改小部件内部的部件; 您的 ID 可能与小部件内部的 ID 重叠等等。

Shadow DOM 解决了 DOM 树封装问题 。

例如，如果您有这样的标记:

<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

而不是

Hello, world!

你的主页看起来像

こんにちは、影の世界!

不仅如此，如果页面上的 JavaScript 询问按钮的 textContent 是什么，它得到的不是 “こんにちは、影の世界!”，而是 “Hello, world!”because the DOM subtree under the shadow root is encapsulated。

注意 : 我从 https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/中挑选了上面的内容，因为它帮助我比这里的答案更好地理解了影子 DOM。我已经在这里添加了相关的内容，以便它可以帮助其他人，但是也可以看看链接，以便进行详细的讨论。


提交答案