首页 > 文章 > 前端

用WebComponents做跨框架UI库教程

时间：2025-11-07 14:00:47 496浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《用Web Components打造跨框架UI库教程》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

使用原生 Web Components 可构建跨框架 UI 组件库，核心是通过 Custom Elements 定义标签、Shadow DOM 隔离样式、Slot 实现内容分发，并在各框架中直接使用，实现一次开发、多处运行。

如何用Web Components构建跨框架的UI组件库？

用 Web Components 构建跨框架的 UI 组件库，核心在于利用浏览器原生能力封装可复用、独立且可在任意前端框架中使用的 UI 元素。它不依赖 React、Vue 或 Angular 的特定语法，而是基于标准 HTML、CSS 和 JavaScript 实现真正的框架无关性。

使用原生 Custom Elements 创建组件

Custom Elements 是 Web Components 的核心之一，允许你定义自己的 HTML 标签。

通过 customElements.define() 方法注册一个类继承自 HTMLElement 的自定义元素：

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

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

之后就可以在任何页面或框架模板中使用：提交。

结合 Shadow DOM 实现样式隔离

Shadow DOM 能为组件创建独立的作用域，避免全局样式污染，也防止外部 CSS 影响组件内部结构。

在组件构造函数中挂载 Shadow Root：

constructor() {
  super();
  this.attachShadow({ mode: 'open' });
}

connectedCallback() {
  this.shadowRoot.innerHTML = `


  `;
}

这样组件的样式不会泄露，也不会被外部样式覆盖，适合构建稳定 UI 库。

支持属性、事件和插槽实现完整交互

为了让组件更灵活，需处理属性变化、对外派发事件以及内容分发。

通过 observedAttributes 监听属性变化并更新 UI
使用 this.dispatchEvent(new CustomEvent(...)) 向外通知用户操作（如点击）
使用支持内容投影，让使用者传入自定义内容

例如：

this.shadowRoot.innerHTML = `

`;

使用时：带图标的按钮，内容会自动插入到 slot 位置。

在不同框架中直接使用 Web Components

由于是原生 HTML 标签，可以在各种框架中无缝集成：

React：直接当作普通标签使用，注意属性传递要用 setAttribute 或 refs 处理非字符串值
Vue：在 template 中使用即可，props 可通过 attributes 传入
Angular：需在模块中配置 CUSTOM_ELEMENTS_SCHEMA 来避免模板报错

无需适配器也能工作，真正实现“写一次，到处用”。

基本上就这些。只要遵循标准、合理封装样式与行为，并提供清晰文档，就能构建出轻量、稳定、跨框架的 UI 组件库。不复杂但容易忽略细节，比如属性监听、事件命名规范和 SSR 兼容性处理。

到这里，我们也就讲完了《用WebComponents做跨框架UI库教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于ShadowDOM,WebComponents,CustomElements,跨框架,UI组件库的知识点！

ShadowDOM WebComponents CustomElements 跨框架 UI组件库