Web Components 实战

Web Components 是浏览器原生的组件化方案，跨框架、可复用，适合做设计系统。

定义一个组件

class UserCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
        .name { font-weight: bold; }
      </style>
      <div class="card">
        <div class="name">${this.getAttribute("name")}</div>
        <slot></slot>
      </div>
    `;
  }
}
customElements.define("user-card", UserCard);

使用：

<user-card name="张三">
  <p>前端工程师</p>
</user-card>

优势

• 框架无关：React/Vue/原生都能用
• 样式隔离：Shadow DOM 自带作用域
• 原生支持：无需构建工具

适用场景

Web Components 特别适合跨团队的设计系统（Design System），一次编写，所有框架都能复用。