问题描述
在 Google Chrome 的开发者工具中，我在 <html lang="en"> 标签下看到了一个 #shadow-root.它有什么作用以及它的用途是什么?我在 Firefox 和 IE 中都看不到它；仅在 Chrome 中，这是一项特殊功能吗?
In Google Chrome’s Developer Tools, I see a #shadow-root right 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?
如果我打开它，它会显示 和 以及名为 reveal 旁边的链接，点击，它指向 和 ，没有别的.
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.
推荐答案
这是一个特殊的指示器，表示 Shadow DOM 存在.这些已经存在多年，但直到最近才向开发人员提供 API.Chrome 已经有这个功能一段时间了，其他浏览器仍在追赶.它可以在元素"部分下的 DevTools 设置中切换.取消选中显示用户代理 Shadow DOM".这至少会隐藏内部创建的任何 Shadow DOM(例如选择元素).我不确定它是否会影响用户创建的那些，例如自定义元素.
This is a special indicator that a Shadow DOM exists. 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.
这些也出现在 iframe 之类的东西中，其中你有一个单独的 DOM 树嵌套在另一个里面.
These come up in things like iframes as well, where you have a separate DOM tree nested inside of another.
Shadow DOM 只是说页面的某些部分有其自己的 DOM.样式和脚本可以限定在该元素内，因此其中运行的内容仅在该边界内执行.
The Shadow DOM is simply saying that some part of the page, has its own DOM within it. Styles and scripting can be scoped within that element so what runs in it only executes in that boundary.
这是 Web 组件 工作所需的主要部分之一.这是一项新技术，允许开发人员构建自己的封装组件，开发人员可以像使用任何其他 HTML 元素一样使用这些组件.
This is one of the primary pieces needed for Web Components to work. Which is a new technology allowing developers to build their own encapsulated components that developers can use just like any other HTML element.
这篇关于什么是影子根的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！