当前位置：首页 > 文章列表 > 文章 > 前端 > 如何构建一个与框架无关的组件系统（Web Components实践）？

如何构建一个与框架无关的组件系统（Web Components实践）？

2026-05-02 20:01:30 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《如何构建一个与框架无关的组件系统（Web Components实践）？》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

使用Web Components可构建与框架无关的UI组件系统，通过Custom Elements定义标签、Shadow DOM实现样式隔离、HTML Templates提升可维护性，并结合属性监听与事件通信，使组件可在任意技术栈中复用，适用于设计系统与微前端场景。

构建一个与框架无关的组件系统，关键在于使用原生 Web 技术实现可复用、可封装、可互操作的 UI 组件。Web Components 正是为此而生——它是一组浏览器原生支持的 API，包括自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（HTML Templates）。通过它们，你可以创建完全独立、样式隔离、行为封装的组件，无论项目使用 React、Vue、Angular 还是纯 HTML，都能直接使用。

使用 Custom Elements 定义组件标签

Custom Elements 允许你注册新的 HTML 标签，并将其关联到一个 JavaScript 类。这是实现组件“可声明式调用”的基础。

定义一个简单的按钮组件：

class MyButton extends HTMLElement {
  connectedCallback() {
    if (this.innerHTML.trim() === '') {
      this.innerHTML = '点击我';
    }
    this.setAttribute('role', 'button');
    this.tabIndex = 0;
  }
}

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

之后在任意页面中都可以使用，无需任何框架支持。

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

直接操作 innerHTML 容易导致样式冲突和逻辑泄露。使用 Shadow DOM 可以将组件内部的 DOM 和 CSS 与外部页面隔离开。

改进上面的按钮，加入 Shadow DOM：

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

  connectedCallback() {
    const label = this.getAttribute('label') || '点击我';
    this.shadowRoot.innerHTML = `

      `;

    this.shadowRoot.querySelector('button')
      .addEventListener('click', () => {
        this.dispatchEvent(new CustomEvent('my-click', { bubbles: true }));
      });
  }
}

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

现在组件内部样式不会影响外部，外部样式也不会穿透进来，真正实现封装。