登录
首页 >  文章 >  前端

WebComponents与JavaScript组件化实践解析

时间：2026-03-01 19:49:47 424浏览 收藏

Web Components作为浏览器原生支持的组件化标准，通过Custom Elements、Shadow DOM和HTML Templates三大核心技术，实现了真正封装良好、样式隔离、跨框架复用的UI组件开发——无需依赖特定框架，即可创建语义化自定义标签、构建独立DOM作用域、复用预编译模板；尽管面临IE兼容性限制和React集成挑战，但凭借Lit等现代工具加持，它正成为设计系统建设与大型项目中长期可维护UI架构的理想选择。

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 的