web学习笔记【随机知识点归类】

摆渡终极鉴黄师

摆渡终极鉴黄师

shadow-dom 是什么
顾名思义， shadow-dom，直译的话就是 影子dom。我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话，查看 DOM 结构的时候，肯定看到过下面这样的结构：

这里的 #shadow-root 所包含的内容其实就是所谓的 shadow-dom 。
shadow-dom 其实是浏览器的一种能力，它允许在浏览器渲染文档（document）的时候向其中的 Dom 结构中插入一棵 DOM 元素子树，但是特殊的是，这棵子树（shadow-dom）并不在主 DOM 树中。
点开 shadow-dom 可以看到内有乾坤，大有内容。其实这内部的具体内容，就是 <video> 的具体实现。

document
这个很好理解，就是我们的正常文档 document 。
shadow host
对于一个内部有 shadow-dom 的元素而言，它必然需要一个宿主元素，对于上面的例子而言， <video> 标签，就是 shadow-dom 的宿主元素。
shadow-root
通过 createShadowRoot返回的文档片段被称为 shadow-root 。它和它的后代元素，都将对用户隐藏，但是它们是实际存在的，在 chrome 中，我们可以通常审查元素去查看它们的具体 DOM 实现。
在 <video> 中，例如暂停，播放，音量控制，全屏按钮，进度条等都是 shadow-root 的后代。它们工作时会显示在屏幕上，但他们的 DOM 结构对用户是不可见的。
contents
就是上述所说的 <video> 中各子组件的 DOM 的具体实现。

xd123456

我是来看图的