html5 shadow dom,shadow dom解析

本文作者：IMWeb ouven

未经同意，禁止转载

1.shadowdom解析

1.1 什么是shadow dom

先看个例子:

这样一个标签可以在浏览器产生几个界面你相对较复杂的播放器，怎么做到的?

为了理解问题，可以选择chrome设置里面的show userAgent shawdow，就可以看到shadow dom里的内容。

#shadow root

0:00

0:00

shadow-root里面的内容就是所有视频播放器控制组件的所在之处，css也可以看到，可见video标签内部也是很多个div和input形成的。

另外浏览器之所以将其置灰，是为了表明这部分是在 shadow DOM 里，对于页面的其他部分来说它是 不可用的 。这里的 不可用 意味着你写的 CSS 选择器和 JavaScript代码都不会影响到这部分内容。实际上，就是让video 标签的逻辑和样式都被浏览器封装了。

1.2 小结

小结下，Shadow DOM 是一个 HTML 的规范，其允许开发者封装自己的 HTML 标签、CSS 样式和 JavaScript代码。也使得开发人员可以创建诸如 video这样自定义的一级标签。总的来说，这些新标签和相关的 API 被称为 Web Components。

关于shadow 都没有些概念可以理解下，上面shadow root是shadow dom的根节点；shadow tree为这个show dom包含的节点树，div和i