Web Components 核心原理与实战指南

先理解概念

Web Components 乍一听可能有点陌生，拆开看就是 Web + Component。作为前端开发者，尤其是使用 Vue、React 等框架的开发者，组件是不可或缺的概念。

组件通常分为业务组件和通用组件。业务组件往往与特定框架深度绑定，比如 Vue 中的 SFC（单文件组件）。而通用组件又可分为框架通用和跨框架通用。跨框架通用组件实现了与框架的解耦，无论底层是什么技术栈都能兼容。要实现这一点，必须依赖原生能力，因为浏览器对原生标准的支持是统一的。

前端原生中确实存在组件概念，那就是 Web Components。它允许我们在不依赖任何第三方库的情况下，创建可复用的自定义 HTML 元素。

在 Vue 中封装一个 MyButton 组件，最终浏览器渲染时会将 MyButton 解析为标准的 button 元素。这是因为浏览器只认识原生 HTML 标签，MyButton 只是逻辑上的封装。如果我们希望浏览器直接渲染 MyButton 这个标签本身，就需要借助 Web Components 来实现。

Custom Elements

Custom Elements 允许我们注册自定义 HTML 元素。通过继承 HTMLElement 类并调用 customElements.define 方法，我们可以让浏览器识别并渲染自定义标签。

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<button>提示</button>';
  }
}

customElements.define('my-button', MyButton);

注册后，页面中直接使用即可被渲染。为了验证这一逻辑，我们可以在组件内添加更多元素，它们会被整体封装，不会被拆解。

组件通常有生命周期，自定义元素也不例外。主要包含两个回调：

connectedCallback：组件挂载到 DOM 时触发。
disconnectedCallback：组件从 DOM 移除时触发。

class MyButton extends HTMLElement {
  connectedCallback() {
    console.log('my-button 挂载完成');
    const btn = this.querySelector('button');
    if (btn) {
      btn.addEventListener('click', () => {
        console.();
      });
    }
  }

  () {
    .();
     btn = .();
     (btn) {
      btn.(, );
    }
  }
}

Web Components 核心原理与实战指南