Html 什么是影子根
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34119639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is shadow root
提问by Andrew
In Google Chrome's Developer Tools, I see a #shadow-rootright under <html lang="en">tag. what does it do and what is it used for? I don't see it in Firefox nor in IE; only in Chrome, is this a special feature?
在谷歌浏览器的开发者工具，我看到#shadow-root的正下方<html lang="en">标签。它有什么作用以及它的用途是什么？我在 Firefox 和 IE 中都看不到它；仅在 Chrome 中，这是一个特殊功能吗？
If I open it, it shows <head>and <body>and a link beside named reveal, by clicking, it points to the <head>and <body>, nothing else.
如果我打开它，它会显示<head>and<body>和一个名为 旁边的链接reveal，通过单击，它指向<head>和<body>，没有别的。
采纳答案by Garbee
This is a special indicator that a Shadow DOMexists. These have existed for years, but developers have never been given APIs into it until recently. Chrome has had this functionality for a while, other browsers are still catching up. It can be toggled in the DevTools Settings under the "Elements" section. Uncheck the "Show User Agent Shadow DOM". This will at least hide away any Shadow DOMs created internally (like select elements.) I am unsure right away if it affects user-created ones, such as custom elements.
这是Shadow DOM存在的特殊指示符。这些已经存在多年，但直到最近才向开发人员提供 API。Chrome 已经有这个功能一段时间了，其他浏览器仍在追赶。它可以在“元素”部分下的 DevTools 设置中切换。取消选中“显示用户代理 Shadow DOM”。这至少会隐藏内部创建的任何 Shadow DOM（如选择元素）。我不确定它是否会影响用户创建的元素，如自定义元素。
These come up in things like iframes as well, where you have a separate DOM tree nested inside of another.
这些也出现在 iframe 之类的东西中，其中你有一个单独的 DOM 树嵌套在另一个树中。
The Shadow DOM is simply saying that some part of the page, has its ownDOM within it. Styles and scripting can be scoped within that element so what runs in it only executes in that boundary.
Shadow DOM 只是说页面的某些部分在其中有自己的DOM。样式和脚本可以限定在该元素内，因此其中运行的内容仅在该边界内执行。
This is one of the primary pieces needed for Web Componentsto work. Which is a new technology allowing developers to build their own encapsulated components that developers can use just like any other HTML element.
这是Web 组件工作所需的主要部分之一。这是一项新技术，允许开发人员构建自己的封装组件，开发人员可以像使用任何其他 HTML 元素一样使用这些组件。
回答by Rao
As an example of Shadow DOM, when you have a <video>tag on a web page, its shown as just one tag in the main DOM, but if you enable Shadow DOM, you will be able to see the video player's HTML(player DOM).
作为 Shadow DOM 的一个例子，当你<video>在网页上有一个标签时，它在主 DOM 中只显示为一个标签，但是如果你启用了 Shadow DOM，你将能够看到视频播放器的 HTML（播放器 DOM）。
This is explained aptly in this article, http://webcomponents.org/articles/introduction-to-shadow-dom/
这在这篇文章中得到了恰当的解释，http://webcomponents.org/articles/introduction-to-shadow-dom/
回答by Aniket Thakur
In the case of web components, there is a fundamental problem that makes widgets built out of HTML and JavaScript hard to use.
在 Web 组件的情况下，有一个基本问题使由 HTML 和 JavaScript 构建的小部件难以使用。
Problem: The DOM tree inside a widget isn't encapsulated from the rest of the page. This lack of encapsulation means your document stylesheet might accidentally apply to parts inside the widget; your JavaScript might accidentally modify parts inside the widget; your IDs might overlap with IDs inside the widget and so on.
问题：小部件内的 DOM 树没有从页面的其余部分封装。缺乏封装意味着您的文档样式表可能会意外应用于小部件内的部分；您的 JavaScript 可能会意外修改小部件内的部分；您的 ID 可能与小部件内的 ID 重叠等等。
Shadow DOM addresses the DOM tree encapsulation problem.
Shadow DOM 解决了 DOM 树封装问题。
For example, if you had markup like this:
例如，如果您有这样的标记：
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
then instead of
然后代替
Hello, world!
your page looks like
你的页面看起来像
こんにちは、影の世界!
Not only that, if JavaScript on the page asks what the button's textContent is, it isn't going to get “こんにちは、影の世界!”, but “Hello, world!”because the DOM subtree under the shadow root is encapsulated.
不仅如此，如果页面上的 JavaScript 询问按钮的 textContent 是什么，它不会得到“こんにちは、影の世界!”，而是“Hello, world!”因为阴影根下的 DOM 子树被封装了。
NOTE: I have picked up above content from https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/as it helped me understand shadow DOM a little better than answers already here. I have added relevant content here so that it helps others but do take a look at the link for detailed discussion on same.
注意：我从https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/获取了上述内容，因为它比这里已有的答案更能帮助我理解 shadow DOM。我在此处添加了相关内容，以便对其他人有所帮助，但请查看链接以进行详细讨论。
