Shoelace: Una biblioteca de componentes web

Artículo original ↗ Discusión en Hacker News ↗

Shoelace es una biblioteca agnóstica de framework de Web Components que busca ofrecer un kit de UI moderno, accesible y fácil de tematizar, y ya se usa en producción en empresas como Microsoft y Font Awesome. Los comentaristas elogian su amplitud, su implementación basada en Lit y su uso directo, pero expresan preocupaciones sobre cómo Shadow DOM dificulta el estilo y el renderizado del lado del servidor, la dependencia de JavaScript para cualquier renderizado, y problemas sutiles como destellos de componentes sin estilo o indefinidos y soporte limitado en versiones antiguas de iOS/Safari. Las comparaciones con Bootstrap, kits basados en Tailwind y controles HTML nativos destacan una compensación constante entre personalización, rendimiento, accesibilidad y compatibilidad a largo plazo con navegadores.

Recepción general y casos de uso

  • Muchos comentaristas están impresionados por la amplitud, el pulido y el enfoque en la accesibilidad de Shoelace; varios informan que lo usan con éxito en proyectos reales.
  • Se valora que funcione con componentes web “vanilla” y configuraciones sin build (p. ej., simples etiquetas de script + plantillas del servidor).
  • Se informa que algunas empresas y productos usan Shoelace en producción, lo que se ve como evidencia de que es viable para aplicaciones de gran tamaño.

¿Por qué reinventar controles básicos?

  • La pregunta planteada: ¿por qué volver a implementar botones, casillas de verificación y menús desplegables en lugar de complementar HTML?
  • Respuestas:
    • Los controles nativos son difíciles de tematizar y personalizar; las bibliotecas los envuelven (por ejemplo, sl-checkbox envolviendo una casilla de verificación nativa + etiqueta) para proporcionar APIs consistentes (tamaños, props, etc.).
    • El branding y el “verse diferente” entre sitios impulsa la UI personalizada.
    • Históricamente, los navegadores han ofrecido por defecto controles ricos y atractivos insuficientes, lo que ha dado lugar a muchas bibliotecas de UI personalizadas.

Estilo, personalización y Shadow DOM

  • Los componentes de Shoelace usan Shadow DOM y propiedades personalizadas de CSS; la personalización suele hacerse mediante selectores ::part.
  • Pros: estilo encapsulado, componentes seguros para insertar directamente, propiedades uniformes.
  • Contras: integración más difícil con Tailwind y otros entornos de CSS global; Shadow DOM y adoptedStyleSheets complican el renderizado del lado del servidor y el theming.
  • Algunos piden sistemas más opinados y visualmente distintivos; otros defienden un “aspecto de plataforma” compartido que la web no tiene.

Rendimiento, FOUC y navegadores antiguos

  • Algunos usuarios informan desplazamiento de diseño y un “destello de componentes indefinidos/sin estilo”, especialmente en Firefox.
  • Técnicas mencionadas: ocultar elementos :not(:defined) (con opacidad para evitar el desplazamiento de diseño), indicadores de carga, “HTML Web Components” (sin Shadow DOM), empaquetado para una carga más rápida.
  • Otros argumentan que esto es un intercambio resuelto/aceptable; algunos rechazan por completo los componentes web por este problema de UX.
  • Aparecen quejas de compatibilidad móvil para Safari antiguo en iOS; otros sostienen que apuntar solo a versiones recientes del navegador ya es algo común.

SSR, dependencia de JS e intercambios

  • Shoelace depende de JS del lado del cliente y de Shadow DOM; no renderiza sin JS y se describe como prácticamente incompatible con configuraciones SSR típicas como Next.js.
  • Algunos ven la capacidad de “simplemente вставarlo en HTML y controlarlo vía APIs del DOM” como una gran ventaja; a los usuarios de frameworks a veces eso les parece menos convincente.

Huecos en componentes y deseos

  • Los puntos que más se mencionan como faltantes o débiles: tablas de datos, selector de fecha, componentes de subida de archivos/subida de imágenes.
  • Hay interés en widgets más ricos y orientados a aplicaciones (por ejemplo, árboles, paneles redimensionables, componentes interactivos de aprendizaje) manteniendo una accesibilidad sólida.