Web components API: Shadow DOM、Light DOM、 Lifecycle Events 和 Custom Events

shadow DOM

组件开发者编写的 DOM。Shadow DOM 对组件来说是本地的，它定义了它的内部结构、作用域 CSS，并封装了实现细节。它还可以定义如何呈现由组件的使用者编写的 DOM。

light DOM

由组件使用者编写的 DOM。这个 DOM 存在于组件的 shadow DOM 之外。它是自定义元素的实际子元素。特别是 slot。

插槽允许组件使用者定义 html，因为不是 shadow DOM 的一部分，没有被封装，所以样式受页面的影响，并且 DOM 可以被获取到。比如下面 img 和 span 就是 light DOM：


  
   Hello

Lifecycle Events

一图胜千言

image.png

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 结合

React 与 Web Components

Vue 与 Web Components

打包构建

使用 webpack

打包出一个全局 bundle，针对每个组件打包出一个单独的包，按需加载时只引入单独的文件即可。

文档建设

构建部署

stencil

纯原生开发存在不少问题，

开发效率低下；比如 html 模版和样式的编写和维护、数据更新的读取和监听、事件的触发、slot 的监听等
整体架构需要从 0 到 1 搭建
目标文件的输出
与其他框架的集成等诸多问题

stencil 是由 ionic 团队开发的用于开发 web 组件库的工具链，包括：框架集成、静态站点生成、单元测试等功能。