什么是影子根

在Google Chrome的开发者工具中,我看到了#shadow-root正确的标签.它做了什么以及它用于什么？我没有在Firefox和IE中看到它; 仅限Chrome,这是一项特殊功能吗？

如果我打开它,它会显示并且在命名旁边有一个链接reveal,通过点击,它指向和,没有别的.

这是Shadow DOM存在的特殊指示符.这些已存在多年,但开发人员直到最近才开始使用API​​.Chrome已经有一段时间使用此功能,其他浏览器仍在追赶.它可以在"元素"部分下的DevTools设置中切换.取消选中"显示用户代理Shadow DOM".这至少会隐藏内部创建的任何Shadow DOM(如选择元素).如果它影响用户创建的,例如自定义元素,我立刻不确定.

这些也出现在像iframe这样的东西中,你有一个独立的DOM树嵌套在另一个内部.

Shadow DOM只是说页面的某些部分在其中有自己的 DOM.样式和脚本可以在该元素中作用域,因此在其中运行的内容仅在该边界中执行.

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

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

本文适当地解释了这一点,http://webcomponents.org/articles/introduction-to-shadow-dom/