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