用 Progressive Web Components 打造经久不衰的设计系统

搞过企业级组件库的，都知道那股纠结劲儿。Web components 牛在哪儿？真正跨框架通用，不被任何一家绑死。可问题是，用起来总带一堆麻烦：JS 没加载前布局乱跳，Shadow DOM 一上场无障碍就出岔子，SSR 还得各种变通。

笑死人了，其实是我们自己想复杂了。

Web Components 的尴尬

一般流程是这样：团队决定用 web components 建设计系统。整出一堆 Custom Elements，捆绑个大块头框架，结果就为个按钮发几十 KB 的 JS。HTML 先到，JS 再来重画一遍。用户眼睛一眨，就看到没样式的鬼样子。屏幕阅读器被 Shadow DOM 整蒙了。SSR？直接头大。

这不是 web components 的锅，是我们建法不对。

何不反其道而行？

牛逼的方案回头看都特简单。组件先用纯 HTML 和 CSS 渲染呢？JS 别当根基，当锦上添花行不行？

这就是 Progressive Web Components 的精髓——一种设计思路，不是框架。分成两层：

基础层：纯 HTML + CSS。浏览器一打开就现形，不用 JS。内容出来了，样式对了，页面稳稳的。

增强层：JS 负责互动、事件、状态啥的——但只在需要时上场。

三种玩法，随你挑

不是所有组件都一个套路。Progressive Web Components 分三种：

Composite Components：包一层现有 HTML。比如下拉菜单用原生 <select>，标签页用列表。Light DOM 生结构，默认无障碍，啥框架都玩得转。

Primitive Components：自给自足。日期选择器、滑块、日历啥的，先吐 HTML，JS 再加互动。

Declarative Shadow DOM Components：用浏览器原生 Shadow DOM，还支持 SSR。需要强封装样式，又不想服务器渲染费劲？正合适。

爽就爽在，你按场景选，没教条。

落地时卡壳的地方

懂思路容易，几十个组件统一搞定难。这时候细节决定成败。

一个靠谱的 progressive 组件库，得管好这些：

• Prop 和 attribute 跨框架同步
• Event delegation 不靠 Shadow DOM
• Hydration 不瞎重渲染
• CSS scoping 不用 JS 扛
• Accessibility 从头内置
• Server-side rendering 不需服务器特殊逻辑

市面多数库逼你自己搞定。结果一堆样板代码，“progressive” 变味，基本功能都得 JS 兜底。

重塑组件架构

真 progressive，就换个优化思路：

先发 HTML。 组件初始态是语义化 HTML，立刻可用。CSS 管样式，无障碍齐活。然后才上 JS 搞互动。

JS 可有可无。 表单验证没 JS 也行，导航菜单纯 HTML 也能读。增强是加分项，不是硬需求。

顺着平台走。 Custom Elements、Shadow DOM（需时用）、Slots、Declarative Shadow DOM，全是浏览器原生。搭上去，别绕弯。

多框架通用。 根基是 HTML，React、Vue、Angular、Svelte、原生 JS 全行。不用适配层。

服务器渲染天生支持。 HTML + CSS 打底，SSR 不是事。复杂状态可选工具管，基础直接就行。

组件库体积该多大？

问句实诚话：组件库真需要多少 JS？

热门库动辄 50KB+。Progressive Web Components 能瘦一大圈。HTML/CSS 先，JS 增强，整个框架开销可能就 2.6KB。剩下全是你的组件。

这对性能是真事儿。体积小，下快、解析快、跑得快。手机网下，3 秒互动 vs 8 秒，天差地别。

SSR 不用愁复杂

SSR 通常得写一堆服务器逻辑。Progressive Web Components 反过来：HTML/CSS 开头，默认就能服务器渲染。

没复杂 JS 的（Composite 和 Declarative）直接秒出。带状态的，先 HTML 初始，客户端再 hydrate 互动。

web components 在 SSR 应用里不实用？这痛点没了。

建出长寿组件库

搞设计系统的，Progressive Web Components 给的是一份稀罕货：跨框架，还不妥协。

不捆 React 包，不绑 Vue 生态。今天用啥框架，三年后换啥，都行。值不值得花心思架构？值。

这思路要自律。别啥都靠 JS 硬上。多琢磨语义 HTML，CSS 也细抠。但回报是真：可复用、快、无障碍。

总结一把

Web components 没问题。我们就是拿它当 JS 框架使唤，其实它就是 HTML 元素。Progressive Web Components 拉回本质：从 web 平台起步，层层加码。结果小巧、通用、性能拉满。

大规模设计系统团队，这位置挺香。