Question

在Google Chrome的开发人员工具中，我在#shadow-root标记下方看到了<html lang="en">。它做了什么以及它用于什么？我没有在Firefox和IE中看到它;仅限Chrome，这是一项特殊功能吗？

如果我打开它，它会显示<head>和<body>以及名为reveal旁边的链接，点击它会指向<head>和<body>没有别的。

Answer 1

这是Shadow DOM存在的特殊指标。这些已存在多年，但开发人员直到最近才开始使用API。 Chrome已经有一段时间使用此功能，其他浏览器仍在追赶。它可以在＆＃34; Elements＆＃34;下的DevTools设置中切换。部分。取消选中＆＃34;显示用户代理Shadow DOM＆＃34;。这至少会隐藏内部创建的任何Shadow DOM（比如select元素）。如果它影响用户创建的，例如自定义元素，我立刻不确定。

这些也出现在像iframe这样的东西中，你有一个独立的DOM树嵌套在另一个内。

Shadow DOM只是说页面的某些部分，其中包含拥有的DOM。样式和脚本可以在该元素中确定范围，因此在其中运行的内容仅在该边界中执行。

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

Answer 2

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

本文http://webcomponents.org/articles/introduction-to-shadow-dom/

对此进行了恰当的解释

Answer 3

对于Web组件，存在一个基本问题，使得基于HTML和JavaScript构建的小部件难以使用。

问题：窗口小部件内的DOM树未封装在页面的其余部分。缺少封装意味着您的文档样式表可能会意外地应用于小部件内的部件；您的JavaScript可能会意外修改小部件内的零件；您的ID可能与小部件内的ID重叠，依此类推。

影子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!” ，因为阴影根下的DOM子树是封装。

注意：我从https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/那里获得了以上内容，因为它比我已经回答的内容帮助我更好地理解了影子DOM。我在此处添加了相关内容，以帮助其他人，但请查看链接以进行详细的讨论。

什么是影子根

3 个答案: