Shoelace：一个 Web Components 库

原文 ↗ Hacker News 讨论 ↗

Shoelace 是一个与框架无关的 Web Components 库，旨在提供一个现代、可访问且易于主题化的 UI 工具包，并且已经被 Microsoft 和 Font Awesome 等公司投入生产使用。评论者赞赏它的覆盖面、基于 Lit 的实现以及即插即用的使用方式，但也提出了对 Shadow DOM 使样式和服务端渲染变得困难、依赖 JavaScript 才能渲染、以及诸如未样式化或未定义组件闪现、对旧版 iOS/Safari 支持有限等细微问题的担忧。与 Bootstrap、基于 Tailwind 的组件套件以及原生 HTML 控件的比较，凸显了在可定制性、性能、可访问性和长期浏览器兼容性之间持续存在的权衡。

整体反响与使用场景

  • 许多评论者对 Shoelace 的覆盖面、打磨程度以及对可访问性的关注印象深刻；也有几位表示已在真实项目中成功使用。
  • 它因能与“原生” Web Components 和免构建方案配合良好而受到重视（例如，简单的 script 标签 + 服务器模板）。
  • 据称一些公司和产品已在生产环境中使用 Shoelace，这被视为它足以支撑较大规模应用的证据。

为什么要重做基础控件？

  • 有人提出疑问：为什么要重新实现按钮、复选框、下拉框，而不是在 HTML 上做增强？
  • 回复包括：
    • 原生控件很难进行主题化和定制；库会对其进行封装（例如，sl-checkbox 封装原生复选框+标签），以提供一致的 API（尺寸、属性等）。
    • 品牌化以及在不同网站上“看起来不一样”的需求推动了自定义 UI。
    • 浏览器历史上对丰富、漂亮的默认样式提供不足，导致出现了大量自定义 UI 库。

样式、定制与 Shadow DOM

  • Shoelace 组件使用 Shadow DOM 和 CSS 自定义属性；定制通常通过 ::part 选择器完成。
  • 优点：样式封装、安全的即插即用组件、统一的属性。
  • 缺点：与 Tailwind 和其他全局 CSS 方案的集成更困难；Shadow DOM 和 adoptedStyleSheets 会使服务端渲染和主题化复杂化。
  • 有人希望有更有主张、视觉上更独特的系统；也有人主张网页缺乏一种共享的“平台风格”。

性能、FOUC 与旧浏览器

  • 一些用户报告出现布局偏移和“未定义/未样式化组件闪现”，尤其是在 Firefox 中。
  • 提到的技巧包括：隐藏 :not(:defined) 元素（使用 opacity 以避免布局偏移）、加载 spinner、“HTML Web Components”（无 Shadow DOM）、通过打包来提升加载速度。
  • 其他人认为这是一个已解决/可接受的权衡；也有人因为这一 UX 问题而完全拒绝 Web Components。
  • 还出现了对旧版 iOS Safari 移动兼容性的抱怨；也有人认为只支持较新的浏览器版本如今已很常见。

SSR、对 JS 的依赖与权衡

  • Shoelace 依赖客户端 JS 和 Shadow DOM；在没有 JS 时不会渲染，并被描述为与 Next.js 之类的典型 SSR 方案实际上不兼容。
  • 一些人认为能够“直接丢进 HTML 里，然后通过 DOM API 控制”是一个重大优势；框架用户有时则觉得这没那么有吸引力。

组件缺口与愿望

  • 常被提到的缺失或薄弱项包括：数据表、日期选择器、文件上传/图片上传组件。
  • 也有人对更丰富、面向应用的组件抱有兴趣（例如树形结构、可调整大小的面板、交互式学习组件），同时保持强可访问性。