shadow DOM 浅析
0 / 0 / 创建于 5年前 /
pardon110 的个人博客
引言#
Shadow-dom游离在 DOM 树之外的节点树，但是他的创建基于普通 DOM 元素（非 document），并且创建后的 Shadow-dom 节点可以从界面上直观的看到。更重要的是，Shadow-dom 具有良好的密封性。换而言之，它具有某种意义上的接口能力，是浏览器提供了一种封装功能。典型场景，即使用 video 标签，在 src 属性填写视频地址，即可播放视频
目的#
- 让浏览器开发者有意隐藏 DOM 结构
- Shadow DOM 为 Web 组件中的 DOM 和 CSS 提供了封装
定义#
- shaw-dom 浏览器的一种能力
- 允许浏览器渲染文档时向其中的 Dom 结构中插入一棵 DOM 元素子树
- 但这棵子树并不在主 DOM 树中
概念#
document正常文档shadow-host对于一个内部有 shadow-dom 的元素而言，它必然需要一个宿主元素shadow-root通过 createShadowRoot 返回的文档片段被称为 shadow-rootcontents各子组件的 DOM 的具体实现
规则#
Shadow DOM必须附加在一个元素上- 可以是 HTML 文件中的一个元素，也可以是脚本中创建的元素
- 以是原生的元素，如
<div>、<p>；也可以是自定义元素如<my-element>
后记#
vue，react中的 web 组件与自定义组件，可以用接口标签的形式注入 Dom 文档源于此
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号