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