Web Component总结
Web Component
一个Web组件通常由四个部分组成:模板、Shadow DOM、自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题
Shadow DOM
有shadow Host(影子宿主)、shadow root(影子子树根节点)、 shadow Boundary(影子边界)、和shadow DOM nodes(影子节点)几个概念,其中后三者组成shadow DOM Subtrees(影子子树)
影子宿主是影子子树的依托,属于文档树
影子根节点对象提供常规DOM操作函数(getElementByID…)获取影子子树节点
来自页面并通过 标签添加到 shadow DOM 的内容被称为分布节点
不足
- 外部不能获取DOM和操作DOM
- 对屏幕阅读器、搜索引擎、浏览器扩展程序等不友好
优势
- 隐藏实现细节
- 实现细节被封装在元素的shadow root节点中
- 避免非预期的修改
- 外界无法获取到COM, 外部CSS样式对DOM无效
- 除非非常明确指定,如采用伪类:::shadow or /deep/, /deep/能穿透多层影子边界
- Shadow DOM中的css也无法应用在主文档上
- 可以通过:host()/::content/:host-content()等特殊的方式修改组件的外观
template
- 惰性,不会提前加载
- 在使用前,模板内部的各种脚本不会运行、图像不会加载等
- 内容不可见
- 无法使用选择器获取到
- 可被放置于任意位置
- 分布式节点的使用不统一,如:
- template中应用CSS需要使用到::content 伪类才能访问到。