Web Awesome与Shoelace相比如何？
内容提要
Shoelace组件库已停止更新，其继任者Web Awesome提供更全面的设计系统，包括70个免费组件、原生元素样式、布局工具、11种主题及更深层的主题API。迁移成本低，多数组件仅需将`sl-`前缀改为`wa-`，并调整少量属性名。Web Awesome Pro支持核心开发，迁移指南可辅助完成转换。
延伸解读
迁移成本比想象中低
文章指出，Shoelace迁移到Web Awesome并非全面重写。约三分之二的组件只需将前缀从`sl-`改为`wa-`即可，其余涉及少量属性名和插槽名的调整。但需注意事件监听字符串、`::part()`选择器和图标名称等细节，这些不会报错但会静默失效。颜色刻度也发生了反转，迁移时需对照指南逐一检查。
从组件库到设计系统的升级
Web Awesome不仅是Shoelace的改名版，而是扩展为完整的设计系统。它新增了原生元素样式、布局工具、11种主题和更深层的主题API，并提供了Shoelace没有的组件，如`<wa-callout>`、`<wa-popover>`等。这意味着迁移后不仅能保持原有功能，还能获得更统一的页面风格和更丰富的组件选择。
长期维护的考量
Shoelace已停止更新，不再有新组件、修复或问题解答。如果项目仍在积极开发，继续使用Shoelace意味着未来新增的代码都将成为迁移负担。文章建议尽早迁移，以降低长期维护成本。同时，Web Awesome Pro的订阅模式支持核心开发，但迁移本身不依赖Pro，免费版已包含大部分所需组件。
Q&A
Web Awesome与Shoelace相比有哪些主要区别？
Web Awesome是Shoelace的继任者，但定位更高：Shoelace是组件库，提供58个组件和明暗主题；Web Awesome是设计系统，提供70个免费组件、原生元素样式、布局工具、11种主题和更深层的主题API，且仍为MIT开源。
从Shoelace迁移到Web Awesome需要改哪些代码？
大部分组件只需将前缀从sl-改为wa-，令牌从--sl-*改为--wa-*，variant="primary"改为variant="brand"，outline/filled改为appearance="outlined"/"filled"，prefix/suffix槽改为start/end，help-text改为hint。少数组件改名，如sl-menu变wa-dropdown、sl-range变wa-slider。
Web Awesome有哪些Shoelace没有的组件？
Web Awesome新增了wa-callout、wa-popover、wa-scroller、wa-accordion、wa-page、wa-number-input、wa-time-input、wa-zoomable-frame、wa-intersection-observer等组件，这些在Shoelace中需要自己实现。
Web Awesome Pro和免费版有什么区别？
Web Awesome Core免费开源，包含70个组件；Pro提供额外组件如wa-combobox、wa-file-input、wa-date-picker、wa-video、wa-sparkline和图表系列，并支持优先支持。Pro的订阅用于资助Core的开发，迁移时几乎不需要Pro。
Web Awesome支持服务端渲染吗？
支持。从3.8版本开始，组件通过Declarative Shadow DOM在服务端渲染，并在JavaScript加载时水合，减少布局偏移，改善首次绘制。该功能目前是实验性的。
Web Awesome的样式如何与现有CSS共存？
组件样式放在@layer wa-component中，因此未分层的CSS默认优先级更高，无需使用!important即可覆盖组件样式。
Shoelace停止更新后，现有项目是否必须迁移？
不必立即迁移。Shoelace仍可正常工作，但不再有更新、修复或支持。如果项目稳定且不再开发，可以继续使用；如果仍在积极开发，建议尽早迁移以减少未来工作量。
