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 伪类才能访问到。