Shoelace：框架无关的 Web Components 组件库

Shoelace 是基于 Web Components 标准的组件库，特点是框架无关——React、Vue、Angular 甚至纯 HTML 都能直接用它。它已被 Font Awesome 收购，2024 年起改名为 Web Awesome，原站点内容迁到了 webawesome.com。

它解决什么问题

一个项目里若混用多种框架（或未来要换框架），绑死框架的组件库就成了包袱。

收购改名容易让人找不到文档：旧的 shoelace.style 已不再作为主入口。

核心能力

迁移期要留意命名

Shoelace 自 2024 年起以 Web Awesome 名义继续发展，旧的 shoelace.style 文档与包名逐步迁过来。接入时请认准 webawesome.com 与新的包名，避免照着老教程装到停更的旧包。

框架无关是它的核心优势：组件以自定义元素形式存在，不会被 React / Vue 的版本迭代绑架。代价是表单集成、状态联动这类「框架感」能力要自己搭一层。

同类工具怎么选

谁适合用

• 技术栈不固定、或多框架并存、想组件可复用的团队
• 做纯 HTML / 静态站，又想要现成无障碍组件的人
• 接受迁移期、愿意跟进 Web Awesome 新文档的开发者

怎么开始

1. 到 webawesome.com 按指引安装，取代旧的 shoelace.style 包。
2. 在页面里以自定义元素方式引入组件（如 <wa-button>）。
3. 框架项目用对应的包装器或直接当 Web Component 注册。
4. 用设计令牌覆盖主题变量，统一品牌配色。
5. 迁移老项目时把 shoelace 包替换为 webawesome 新包并核对 API。

常见问题

Shoelace 还更新吗？
主线已并入 Web Awesome（webawesome.com），旧 shoelace.style 不再作为主入口，请跟进新文档。

和框架专属库比差在哪？
生态工具（如表单状态绑定）要自己搭，胜在不会被任何框架绑架。

授权有变化吗？
仍采用 MIT，框架无关、可商用，迁移不影响使用授权。

授权与合规

Shoelace（现 Web Awesome）采用 MIT 协议，框架无关、可商用；原 Shoelace 代码已并入 Web Awesome 体系，使用与原项目一样的宽松授权。 官网：webawesome.com。