什么是影根 [英] What is shadow root
问题描述
在Google Chrome的开发者工具中，我在< html lang =en> ＃shadow-root c $ c>标签。它做什么和它用于什么？我在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?
如果我打开它，它会显示< head> 和< body> 和名为之间的链接显示，通过点击，它指向 < head> 和< body> ，没有别的。
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已经有这个功能了一段时间，其他的浏览器还在赶上。可以在元素部分的开发工具设置中切换。取消选中显示用户代理阴影DOM。这将至少隐藏内部创建的任何影子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 Components 工作。这是一种新技术，允许开发人员构建自己封装的组件，开发人员可以像任何其他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.
这篇关于什么是影根的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
