shadow DOM 浅析

引言

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-root
  • contents 各子组件的 DOM 的具体实现

规则

  • Shadow DOM 必须附加在一个元素上
  • 可以是HTML文件中的一个元素,也可以是脚本中创建的元素
  • 以是原生的元素,如<div>、<p>;也可以是自定义元素如 <my-element>

后记

  • vue,react 中的web组件与自定义组件,可以用接口标签的形式注入Dom文档源于此
本作品采用《CC 协议》,转载必须注明作者和本文链接
pardon110
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
开发者 @ 社科大
文章
133
粉丝
24
喜欢
100
收藏
54
排名:107
访问:8.9 万
私信
所有博文
社区赞助商