摆渡终极鉴黄师 发表于 2018-4-24 11:53:42

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

本帖最后由 摆渡终极鉴黄师 于 2018-4-24 12:35 编辑


摆渡终极鉴黄师 发表于 2018-4-24 12:22:42

本帖最后由 摆渡终极鉴黄师 于 2018-4-24 12:34 编辑

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 发表于 2018-4-24 13:59:10

我是来看图的{:5_109:}
页: [1]
查看完整版本: web学习笔记【随机知识点归类】