初探 Web Components：构建可复用组件

Web Components 让我们可以在不依赖框架的情况下创建可复用的自定义元素。本文介绍 Shadow DOM、Custom Elements 和 HTML Templates 的基本用法。

Web Components 三大技术

Web Components 是一组浏览器原生 API，由三项核心技术组成：

• Custom Elements — 自定义 HTML 标签
• Shadow DOM — 封装的 DOM 和样式
• HTML Templates — 可复用的 HTML 模板

创建第一个 Custom Element

自定义元素的名称必须包含连字符（如 my-card），以区别于原生 HTML 元素。

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          padding: 16px;
          max-width: 320px;
        }
        .card h3 { margin: 0 0 8px; }
        .card p { color: #666; margin: 0; }
      </style>
      <div class="card">
        <h3>${this.getAttribute('title') || '标题'}</h3>
        <p><slot></slot></p>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

使用时就像普通 HTML 标签一样：

<my-card title="Hello World">
  这是卡片的内容
</my-card>

Shadow DOM 的样式隔离

Shadow DOM 最大的优势之一是样式隔离。组件内部的样式不会泄漏到外部，外部的样式也不会影响组件内部。这解决了 CSS 全局作用域带来的命名冲突问题。

使用 Slot 实现内容分发

<slot> 元素让组件使用者可以将自定义内容插入到组件的指定位置：

// 组件模板中
<div class="layout">
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</div>

// 使用时
<my-layout>
  <span slot="header">页头</span>
  <p>主要内容</p>
  <span slot="footer">页脚</span>
</my-layout>

生命周期回调

Custom Elements 提供了几个关键的生命周期钩子：

• connectedCallback — 元素被插入 DOM 时触发
• disconnectedCallback — 元素从 DOM 中移除时触发
• attributeChangedCallback — 被监听的属性变化时触发
• adoptedCallback — 元素被移动到新文档时触发

总结

Web Components 是浏览器原生的组件化方案，无需任何构建工具和框架就能使用。虽然目前在复杂应用中它还无法完全替代 React/Vue，但在构建可复用的 UI 组件库和跨框架共享组件方面，它有着独特的优势。