基于 Vue 3 构建企业级 Web Components 组件库

前言

在前端技术栈百花齐放的今天，我们经常面临一个痛点：组件复用难。React 组件无法直接在 Vue 项目中使用，Vue 2 的组件难以平滑迁移到 Vue 3。

Web Components 的出现正是为了解决这个问题。它是一套 W3C 标准，允许开发者创建可重用、封装良好且独立于框架的 UI 组件。无论你的主应用是 Vue、React 还是纯原生 JS，Web Components 都能完美运行。

一、技术全景：什么是 Web Components？

Web Components 并非单一技术，而是由四项核心技术组成的规范集合，旨在实现组件的高内聚与低耦合。

1.1 核心组成体系

我们可以通过下图理解其运作机制：

graph TD
WC[Web Components] --> CE[Custom Elements]
WC --> SD[Shadow DOM]
WC --> HT[HTML Templates]
WC --> ES[ES Modules]
subgraph "逻辑层：Custom Elements"
CE --> CER[CustomElementRegistry]
CE --> LC[生命周期回调]
LC --> C1[connectedCallback <br/>(挂载)]
LC --> C2[disconnectedCallback <br/>(卸载)]
LC --> C3[attributeChangedCallback <br/>(属性变更)]
end
subgraph "视图层：Shadow DOM"
SD --> SR[ShadowRoot]
SD --> DOMI[DOM 隔离]
SD --> CSSI[样式 隔离]
end

• Custom Elements：通过 CustomElementRegistry 定义浏览器直接识别的新标签（如 ）。
• Shadow DOM：这是组件化的灵魂。它将组件内的 HTML 和 CSS 隐藏在 #shadow-root 中，完全隔离于外部文档。外部的 CSS 无法影响组件，组件的样式也不会污染外部。
• HTML Templates：使用