什么是影子根

在Google Chrome的开发者工具中,我在<html lang="en">标签下看到#shadow-root 。 它做什么,它用于什么? 我没有看到它在Firefox或IE中; 只有在Chrome中,这是一个特殊的function?

如果我打开它,它会显示<head><body>以及旁边名为reveal的链接,通过点击,它指向<head><body> ,没有别的。

这是一个Shadow DOM存在的特殊指示器。 这些已经存在了多年,但直到最近才有开发人员从未接触过API。 Chrome已经有了这个function一段时间,其他浏览器仍然赶上。 可以在“元素”部分下的DevTools设置中进行切换。 取消选中“显示用户代理Shadow DOM”。 这至less会隐藏内部创build的任何Shadow DOM(如select元素)。如果影响用户创build的元素(如自定义元素),我不确定。

这些也出现在iframe之类的东西里面,其中有一个单独的DOM树嵌套在另一个之内。

Shadow DOM只是说在页面的某个部分里面有自己的 DOM。 样式和脚本可以在该元素的范围内运行,只在该边界执行。

这是Web组件工作所需的主要部分之一。 这是一项允许开发人员构build自己的封装组件的新技术,开发人员可以像使用其他任何HTML元素一样使用它。

作为Shadow DOM的一个例子,当你在网页上有一个<video>标记时,它在主DOM中只显示一个标记,但是如果你启用了Shadow DOM,你将能够看到video播放器的HTML DOM)。


影子DOM


这在本文中得到了恰当的解释, http://webcomponents.org/articles/introduction-to-shadow-dom/