当前位置：首页 > 文章列表 > 文章 > 前端 > 无框架组件系统构建实战指南

无框架组件系统构建实战指南

2025-11-26 12:58:30 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《构建无框架组件系统：Web Components实战指南》，聊聊，我们一起来看看吧！

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

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

构建一个与框架无关的组件系统，关键在于使用原生 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);

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