浏览器 - Web Components - 《前端飞行随笔》

Custom elements
- 定义自定义元素
- 生命周期
参考

Web Components 出现的目的是为了提高 HTML 的拓展性，使得 HTML 可以像 JS 一样模块化的使用

其中有几个关键知识点

Custom elements
Shadow DOM
Template
Slot
Style
Event

Custom elements

自定义元素使开发人员能够扩展 HTML 并创建自己的标签。由于自定义元素是基于标准的，所以它们将从Web的内置组件模型中受益。得到收益之一便是可以将模块化的代以在许多不同的上下文中重用。

定义自定义元素

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);
// Or use an anonymous class if you don't want a named constructor in current scope.
window.customElements.define('app-drawer', class extends HTMLElement {...});

定义自定义元素时有如下几个规范：

自定义元素的名称必须包含破折号（-）。<x-tags>，<my-element> 和 <my-awesome-app> 和都是有效名称，而和 <foo_bar> 则不是。这一规范要求是为了使 HTML 解析器可以将自定义元素与常规元素区分开。当将新标签添加到HTML时，它还可以确保向前兼容性。
不能重复注册相同名称的自定义元素，如果做了则会抛出 DOMException 的错误。
自定义元素不能使用“自闭”标签的用法，类似于 <br />。必须完整的写出它的关闭标签，类似于 <app-drawer></app-drawer>

生命周期

继承于 HTMLElement 的自定义元素有如下几个原生的生命周期函数（下面的生命周期函数都是同步的）

名称	何时调用
constructor	自定义元素创建或者升级的时候。用于初始化状态，设置事件监听或者创建 Shadow DOM。相关规范
connectedCallback	每次自定义元素插入到页面的时候。类似于 Vue 的 mounted。
disconnectedCallback	每次自定义元素从页面上卸载的时候。类似于 Vue 的 unmounted。
attributeChangedCallback(attrName, oldVal, newVal)	当自定义元素的属性发生变化的时候。
adoptedCallback	自定义元素被移动至新的 Document 上下文的时候。

class AppDrawer extends HTMLElement {
  constructor() {
    super(); // always call super() first in the constructor.
    ...
  }
  connectedCallback() {
    ...
  }
  disconnectedCallback() {
    ...
  }
  attributeChangedCallback(attrName, oldVal, newVal) {
    ...
  }
}

Web Components

Custom elements

定义自定义元素

生命周期

参考