渐进式 Web Components

Hacker News Top 工具
web-components progressive-enhancement open-source javascript design-systems frontend

摘要

Ariel Salminen 介绍了 Elena，一个 2.6kB 的开源库，用于构建渐进式 Web Components，这些组件无需 JavaScript 即可渲染 HTML 和 CSS，并逐步增强。文章解释了该方法背后的设计理念和分类法。

<a href="https:&#x2F;&#x2F;github.com&#x2F;arielsalminen&#x2F;elena" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;arielsalminen&#x2F;elena</a><p><a href="https:&#x2F;&#x2F;elenajs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;elenajs.com&#x2F;</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

Lobsters Hottest

这篇主观性很强的文章激进地主张在复杂 Web 应用中使用现代 JavaScript 框架（如 React）而非纯 HTML，认为复杂性需要合适的工具。

Show HN：一个CSS 3D引擎（无需WebGL）

Hacker News Top

PolyCSS 是一个 CSS 多边形网格库，能将 3D 模型渲染为真实的 HTML 元素（使用 CSS matrix3d），支持 OBJ/MTL、GLB 和 VOX 格式，可与 React、Vue 或原生 JavaScript 配合使用。