渐进式 Web Components
摘要
Ariel Salminen 介绍了 Elena，一个 2.6kB 的开源库，用于构建渐进式 Web Components，这些组件无需 JavaScript 即可渲染 HTML 和 CSS，并逐步增强。文章解释了该方法背后的设计理念和分类法。
<a href="https://github.com/arielsalminen/elena" rel="nofollow">https://github.com/arielsalminen/elena</a><p><a href="https://elenajs.com/" rel="nofollow">https://elenajs.com/</a>
查看缓存全文
缓存时间: 2026/07/31 23:00
# 渐进式 Web Components
来源：https://arielsalminen.com/2026/progressive-web-components/
我使用 Web Components 近十年，并用它们构建了各种企业级设计系统。尽管它们在纸面上看起来很美好，但同样的痛点反复出现：布局偏移、未样式化内容的闪烁（FOUC）、服务端渲染支持不佳、过度依赖客户端 JavaScript、与 React Server Components 等框架配合不佳、可访问性问题等等……尽管如此，我仍然认为 Web Components 是设计系统的绝佳基础。没有其他方法能像它一样，基于 Web 平台已有的能力，实现真正的跨框架可移植性。问题不一定在于模型本身，而在于我们一直以来的构建方式。
这就是我最终创建 Elena 的原因——一个我今天要开源的库。Elena 从 HTML 和 CSS 出发，始终扎根于 Web 标准和平台原生能力。
## 什么是渐进式 Web Components？
渐进式 Web Components（Progressive Web Component）是一种原生自定义元素，按两层设计：底层是 HTML 和 CSS，无需 JavaScript 即可立即渲染；增强层是 JavaScript，用于添加响应性、事件处理以及更高级的模板能力。
渐进式 Web Components 有三种类型：
1. **组合组件（Composite Components）**：封装并增强其内部组合的 HTML。其所有 HTML 和 CSS 都位于 Light DOM 中。你也可以称之为 HTML Web Components。
2. **基础组件（Primitive Components）**：自包含并渲染自己的 HTML。其所有 CSS 与渲染初始状态所需的基础 HTML 一起位于 Light DOM 中。
3. **声明式组件（Declarative Components）**：是上述两种的混合体，使用声明式 Shadow DOM。
一张解释三种渐进式 Web Components 类型的示意图。
***注意：**
相似文章
就他妈用 React
这篇主观性很强的文章激进地主张在复杂 Web 应用中使用现代 JavaScript 框架（如 React）而非纯 HTML，认为复杂性需要合适的工具。
Show HN：一个CSS 3D引擎（无需WebGL）
PolyCSS 是一个 CSS 多边形网格库，能将 3D 模型渲染为真实的 HTML 元素（使用 CSS matrix3d），支持 OBJ/MTL、GLB 和 VOX 格式，可与 React、Vue 或原生 JavaScript 配合使用。
告别Tailwind，学习组织CSS
作者反思了从Tailwind CSS迁移到带语义HTML的原生CSS的过程，分享了利用从Tailwind学到的重置、组件和工具类等系统来组织CSS的心得。
Canvas 中的 HTML 演示
来自 Chrome DevRel 团队的 CSS 和 Web UI 演示合集，包括 Canvas 中的 HTML 演示。
HTMX 太酷了，我自己写了一个
本文探讨了 HTMX 这个库，它偏爱服务器端渲染的 HTML，而非大量使用 JavaScript 的前端。作者发现 HTMX 对于持久化的 UI 组件很有用，但最终出于个人对最小依赖的偏好，决定自己实现一套解决方案。