什么是影根
What is shadow root
在 Google Chrome 的开发者工具中，我看到 #shadow-root 就在 <html lang="en"> 标签下。它有什么作用以及它的用途是什么？我在 Firefox 和 IE 中都没有看到它；只有 Chrome，这是一个特殊功能吗？
如果我打开它，它会显示 <head> 和 <body> 以及名为 reveal 的 link，通过单击它指向 <head>和 <body>，没有别的。
这是一个特殊的指示符，表示 Shadow DOM 存在。这些已经存在多年，但直到最近才向开发人员提供 API。 Chrome 这个功能已经有一段时间了，其他浏览器还在追赶。它可以在 "Elements" 部分下的 DevTools 设置中切换。取消选中 "Show User Agent Shadow DOM"。这至少会隐藏内部创建的任何 Shadow DOMs（如 select 元素。）我不确定它是否会影响用户创建的元素，例如自定义元素。
这些也出现在 iframe 之类的东西中，你有一个单独的 DOM 树嵌套在另一个树中。
影子 DOM 只是说页面的某些部分在其中有自己的 DOM。样式和脚本可以限定在该元素内，因此在其中运行的内容仅在该边界内执行。
这是 Web Components 工作所需的主要部分之一。这是一项新技术，允许开发人员构建自己的封装组件，开发人员可以像使用任何其他 HTML 元素一样使用这些组件。
以 Shadow DOM 为例，当您在网页上有一个 <video> 标签时，它在主 DOM 中仅显示为一个标签，但如果您启用阴影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!” 因为shadow root下的DOM子树被封装.
注意：我从 https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 中获取了以上内容，因为它帮助我理解影子 DOM 比这里已有的答案更好一些。我已经在此处添加了相关内容，以便对其他人有所帮助，但请查看 link 以进行详细讨论。
在 Google Chrome 的开发者工具中，我看到 #shadow-root 就在 <html lang="en"> 标签下。它有什么作用以及它的用途是什么？我在 Firefox 和 IE 中都没有看到它；只有 Chrome，这是一个特殊功能吗？
如果我打开它，它会显示 <head> 和 <body> 以及名为 reveal 的 link，通过单击它指向 <head>和 <body>，没有别的。
这是一个特殊的指示符，表示 Shadow DOM 存在。这些已经存在多年，但直到最近才向开发人员提供 API。 Chrome 这个功能已经有一段时间了，其他浏览器还在追赶。它可以在 "Elements" 部分下的 DevTools 设置中切换。取消选中 "Show User Agent Shadow DOM"。这至少会隐藏内部创建的任何 Shadow DOMs（如 select 元素。）我不确定它是否会影响用户创建的元素，例如自定义元素。
这些也出现在 iframe 之类的东西中，你有一个单独的 DOM 树嵌套在另一个树中。
影子 DOM 只是说页面的某些部分在其中有自己的 DOM。样式和脚本可以限定在该元素内，因此在其中运行的内容仅在该边界内执行。
这是 Web Components 工作所需的主要部分之一。这是一项新技术，允许开发人员构建自己的封装组件，开发人员可以像使用任何其他 HTML 元素一样使用这些组件。
以 Shadow DOM 为例，当您在网页上有一个 <video> 标签时，它在主 DOM 中仅显示为一个标签，但如果您启用阴影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!” 因为shadow root下的DOM子树被封装.
注意：我从 https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 中获取了以上内容，因为它帮助我理解影子 DOM 比这里已有的答案更好一些。我已经在此处添加了相关内容，以便对其他人有所帮助，但请查看 link 以进行详细讨论。