什么是影子根
Answers:
这是存在Shadow DOM的特殊指示。这些已经存在多年了，但是直到最近才向开发人员提供API。Chrome拥有此功能已有一段时间，其他浏览器仍在追赶。可以在“元素”部分下的“ DevTools设置”中进行切换。取消选中“显示用户代理阴影DOM”。这至少将隐藏任何内部创建的Shadow DOM（例如select元素）。我不确定是否会影响用户创建的Shadow DOM，例如自定义元素。
这些问题也出现在iframe之类的地方，其中您有一个单独的DOM树嵌套在另一个树中。
Shadow DOM只是说页面的某些部分在其中具有自己的 DOM。样式和脚本可以在该元素内确定范围，因此其中运行的内容仅在该边界内执行。
这是Web组件工作所需的主要部分之一。这是一项新技术，允许开发人员构建自己的封装组件，开发人员可以像使用任何其他HTML元素一样使用这些组件。
作为Shadow DOM的示例，当您<video>在网页上有一个标签时，该标签仅在主DOM中显示为一个标签，但是如果启用Shadow DOM，您将能够看到视频播放器的HTML（播放器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!” 因为影子根下的DOM子树已封装。
注意：我从https://www.html5rocks.com/zh-cn/tutorials/webcomponents/shadowdom/中获取了上述内容，因为它比我已经提供的答案更好地理解了影子DOM。我在此处添加了相关内容，以帮助其他人，但请查看链接以进行详细讨论。