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

无框架组件系统构建指南

2025-10-14 20:33:34 0浏览收藏

欢迎各位小伙伴来到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);

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