登录
首页 >  文章 >  前端

WebComponents与JavaScript组件化实践解析

时间：2026-02-20 12:02:39 114浏览 收藏

Web Components作为浏览器原生支持的组件化标准，通过Custom Elements、Shadow DOM和HTML Templates三大核心技术，实现了真正意义上的封装、复用与样式隔离——无需依赖框架即可创建可跨React、Vue、Angular等环境使用的自定义HTML元素；它既解决了传统JavaScript组件化中样式污染、逻辑耦合的痛点，又为设计系统和跨团队UI库建设提供了坚实底座，尽管需关注IE兼容性、框架集成差异及状态管理等实践细节，但借助Lit等现代工具，开发者能高效构建出干净、健壮、面向未来的组件生态。

JavaScript组件化_WebComponents标准实践

JavaScript组件化是现代前端开发的重要方向，而WebComponents作为浏览器原生支持的组件化标准，提供了一种不依赖框架、跨平台复用UI组件的方式。它由三项核心技术组成：Custom Elements、Shadow DOM 和 HTML Templates。通过这些技术，开发者可以创建封装良好、可复用、样式隔离的自定义HTML元素。

Custom Elements：定义自定义标签

Custom Elements 允许我们创建新的HTML标签，并为其绑定JavaScript类。浏览器会识别这些自定义标签，并执行对应的逻辑。

使用 customElements.define() 方法注册一个自定义元素，类需继承 HTMLElement 或其子类：

class MyButton extends HTMLElement {
  connectedCallback() {
    if (!this.rendered) {
      this.innerHTML = ``;
      this.rendered = true;
    }
  }
}

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

之后就可以在HTML中使用：。注意：自定义标签名必须包含短横线（-），以避免与标准HTML标签冲突。

Shadow DOM：实现样式和结构隔离

Shadow DOM 提供了一个独立的DOM树，与主文档DOM隔离，确保组件内部的样式不会影响外部，外部样式也不会污染组件内部。

在自定义元素中通过 attachShadow() 启用 Shadow DOM：

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

  connectedCallback() {
    this.shadowRoot.innerHTML = `
     
     


      
     

    `;
  }
}

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

使用 可以插入外部内容，实现内容分发。mode 设置为 'open' 表示可通过 JavaScript 访问 shadowRoot，'closed' 则不可访问。

HTML Templates：预定义结构模板

HTML 的