Shoelace: A library of web components

Original Article ↗ Hacker News Discussion ↗

Shoelace is a framework-agnostic library of Web Components that aims to provide a modern, accessible, and easily themeable UI toolkit, and is already in production use by companies like Microsoft and Font Awesome. Commenters praise its breadth, Lit-based implementation, and drop-in usage, but raise concerns about Shadow DOM making styling and server-side rendering difficult, reliance on JavaScript for any rendering, and subtle issues like flashes of unstyled or undefined components and limited support on older iOS/Safari versions. Comparisons to Bootstrap, Tailwind-based kits, and native HTML controls highlight an ongoing trade-off between customizability, performance, accessibility, and long-term browser compatibility.

Overall reception & use cases

  • Many commenters are impressed with Shoelace’s breadth, polish, and accessibility focus; several report using it successfully in real projects.
  • It’s valued for working with “vanilla” web components and no-build setups (e.g., simple script tags + server templates).
  • Some companies and products are reported to use Shoelace in production, seen as evidence it’s viable for substantial apps.

Why reinvent basic controls?

  • Question raised: why reimplement buttons, checkboxes, dropdowns instead of augmenting HTML?
  • Replies:
    • Native controls are hard to theme and customize; libraries wrap them (e.g., sl-checkbox wrapping a native checkbox+label) to provide consistent APIs (sizes, props, etc.).
    • Branding and “looking different” across sites drives custom UI.
    • Browsers historically under-provide rich, attractive defaults, leading to many custom UI libraries.

Styling, customization, and Shadow DOM

  • Shoelace components use Shadow DOM and CSS custom properties; customization often via ::part selectors.
  • Pros: encapsulated styling, safe drop-in components, uniform properties.
  • Cons: harder integration with Tailwind and other global-CSS setups; Shadow DOM and adoptedStyleSheets complicate server-side rendering and theming.
  • Some ask for more opinionated, visually distinctive systems; others argue for a shared “platform look” that the web lacks.

Performance, FOUC, and older browsers

  • Some users report layout shift and “flash of undefined/unstyled components,” especially in Firefox.
  • Techniques mentioned: hiding :not(:defined) elements (with opacity to avoid layout shift), loading spinners, “HTML Web Components” (no Shadow DOM), bundling for faster loading.
  • Others argue this is a solved/acceptable trade-off; some reject web components entirely over this UX issue.
  • Mobile compatibility complaints appear for older iOS Safari; others argue targeting only recent browser versions is now common.

SSR, JS dependence, and trade-offs

  • Shoelace relies on client-side JS and Shadow DOM; doesn’t render without JS and is described as effectively incompatible with typical SSR setups like Next.js.
  • Some see the ability to “just drop into HTML and control via DOM APIs” as a major advantage; framework users sometimes find that less compelling.

Component gaps & wishes

  • Missing or weak spots often cited: data tables, date picker, file upload/image upload components.
  • There is interest in richer, app-oriented widgets (e.g., trees, resizable panes, interactive learning components) while keeping accessibility strong.