什么是影子根
在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）。
这在本文中得到了恰当的解释， http://webcomponents.org/articles/introduction-to-shadow-dom/
