shadow DOM
组件开发者编写的 DOM。Shadow DOM 对组件来说是本地的，它定义了它的内部结构、作用域 CSS，并封装了实现细节。它还可以定义如何呈现由组件的使用者编写的 DOM。
light DOM
由组件使用者编写的 DOM。这个 DOM 存在于组件的 shadow DOM 之外。它是自定义元素的实际子元素。特别是 slot。
插槽允许组件使用者定义 html，因为不是 shadow DOM 的一部分，没有被封装，所以样式受页面的影响，并且 DOM 可以被获取到。比如下面 img 和 span 就是 light DOM：
<webc-button>
<img src slot="icon" />
<span> Hello </span>
</webc-button>
Lifecycle Events
一图胜千言
Constructor
创建 webc 时调用。
- HTMLElement 类建立原型链的地方
- 初始化组件必要的属性
- 使用 attachShadow() 方法创建 shadow DOM
其余操作，比如获取数据、渲染不建议在这里，而是在 connectedCallback 中
connectedCallback
每次 web 组件连接到 DOM 时调用。适合获取数据或添加事件监听器。
adoptedCallback
每次将 Web 组件移动到新文档时调用。这特别适用于 iFrame。
attributeChangedCallback
每次添加、更改或删除 web 组件的属性时调用。
接收三个参数：
- 属性名
- 旧值
- 新值
attributeChangedCallback(name, oldValue, newValue) {
}
要能够监听到属性的变化，需要 observedAttributes 方法指定要监听的属性。
static get observedAttributes() {
return ['value', 'min', 'max'];
}
disconnectedCallback
Web 组件与文档 DOM 断开连接时调用。适合移除事件监听器，中断数据的请求等操作。
Custom Events
当我们基于用户操作执行代码时，原生事件是我们必须在 Web 上添加交互性的主要方式：例如，当用户单击某处（单击事件）时我们运行一些程序，或者当用户输入时验证值的合法性。
同样的，在开发 web 组件时，不得不需要用到事件。因为：事件是组建公共 API 的一部分，某些事件触发后的逻辑需要交给组件使用者处理。比如：
- 什么时候加载完数据
- 值更改
- 内部触发的事件
创建自定义事件
使用 Event 构造函数
const event = new Event('build')
ele.addEventListener('build', function (e) { ... }, false)
ele.dispatchEvent(event)
添加自定义数据
要向事件对象添加更多数据，使用 customEvent，detail 属性可用于传递自定义数据。 例如：
const event = new CustomEvent('build', { 'detail': 22 })
ele.dispatchEvent(event)
组件库建设
内部使用纯原生 API 搞了一套移动端组件库。大致罗列下一套组件库需要做哪些工作：
布局适配、主题
目前主流的组件库在适配上基本采用的方式是：设置基准值，然后使用 rem 或 vw 或者两者兼用的方式，开发时同时使用 px，打包时使用 px2rem 的插件进行处理。但是 webc 组件不同，css 被封装到了 Shadow DOM 中，无法使用 px2rem 进行修改。并且 webc 组件还要面临使用者适配方案不一致的情况。
webc 适配方案
既然 webcomponents 的组件是已经打包成了不可见的 shadow dom 了，既然通过插件改不了 css 代码，就需要一个变量和外部形成桥梁，css 变量就是低成本、便捷的选择。事实上已经有不少三方组件库采用 css 变量实现主题的自定义。
;(function (win) {
win.rwcFn = function () {
var oDoc = document.documentElement,
iW = oDoc.clientWidth || win.innerWidth,
_base = 375,
_maxW = 1024
iW = Math.min(iW, _maxW)
oDoc.style.setProperty('--webc-base-font', (iW / _base).toFixed(2))
}
rwcFn()
win.addEventListener('resize', rwcFn, false)
})(window)
@media (min-width: 320px) {
:root {
--webc-base-font: 0.8533333333333334;
}
}
@media (min-width: 360px) {
:root {
--webc-base-font: 0.96;
}
}
/*
iphone 678x
*/
@media (min-width: 375px) {
:root {
--webc-base-font: 1;
}
}
/*
iphone 678 plus
*/
@media (min-width: 414px) {
:root {
--webc-base-font: 1.104;
}
}
/*
ipad
*/
@media (min-width: 677px) {
:root {
--webc-base-font: 1.8053333333333332;
}
}
/*
ipad
*/
@media (min-width: 712px) {
:root {
--webc-base-font: 1.8986666666666667;
}
}
/*
ipad
*/
@media (min-width: 768px) {
:root {
--webc-base-font: 2.048;
}
}
代码质量
eslint、prettier、husky
无障碍
单元测试
使用 @open-wc/testing 和 @web/test-runner 做单元测试
与 Vue & React 结合
打包构建
使用 webpack
打包出一个全局 bundle，针对每个组件打包出一个单独的包，按需加载时只引入单独的文件即可。
文档建设
构建部署
stencil
纯原生开发存在不少问题，
- 开发效率低下；比如 html 模版和样式的编写和维护、数据更新的读取和监听、事件的触发、slot 的监听等
- 整体架构需要从 0 到 1 搭建
- 目标文件的输出
- 与其他框架的集成等诸多问题
stencil 是由 ionic 团队开发的用于开发 web 组件库的工具链，包括：框架集成、静态站点生成、单元测试等功能。
