Esta es una publicación sobre Cordon de zapato, una biblioteca de componentes de cory laviska, pero con un giro. Define todos sus componentes estándar de UX: pestañas, modales, acordeones, autocompletado y mucho mucho mas. Se ven hermosos desde el primer momento, son accesibles y totalmente personalizables. Pero en lugar de crear estos componentes en React, Solid o Svelte, etc., los crea con Componentes web; esto significa que puedes usarlos con cualquier marco de referencia.
Algunas cosas preliminares
Los componentes web son geniales, pero actualmente hay algunos pequeños inconvenientes a tener en cuenta.
Reaccionar
Dije que funcionan en cualquier marco de JavaScript, pero como he escrito antes, el soporte de React para componentes web es actualmente pobre. Para abordar esto, Shoelace en realidad envoltorios creados solo para reaccionar.
Otra opción, que personalmente me gusta, es crear un componente React delgado que acepte el nombre de la etiqueta de un componente web y todos sus atributos y propiedades, y luego haga el trabajo sucio de manejar las deficiencias de React. Hablé de esta opción. en una publicación anterior. Me gusta esta solución porque está diseñada para ser eliminada. El problema de interoperabilidad del componente web se solucionó actualmente en la rama experimental de React, por lo que una vez que se envió, cualquier componente interoperable del componente web delgado que esté utilizando podría buscarse y eliminarse, dejándolo con usos directos del componente web, sin ningún envoltorio de React.
Representación del lado del servidor (SSR)
El soporte para SSR también es deficiente en el momento de escribir este artículo. En teoría, hay algo llamado DOM de sombra declarativo (DSD) que permitiría SSR. Pero la compatibilidad con el navegador es mínima y, en cualquier caso, DSD realmente requiere soporte del servidor trabajar bien, lo que significa Siguiente, Remix, o lo que sea que use en el servidor deberá ser capaz de un manejo especial.
Dicho esto, hay otras formas de hacer que los componentes web funcionen. solo trabajo
con una aplicación web que tiene SSR con algo como Siguiente. La versión corta es que las secuencias de comandos que registran sus componentes web deben ejecutarse en una secuencia de comandos de bloqueo antes de que se analice su marcado. Pero eso es tema para otro post.
Por supuesto, si está creando algún tipo de SPA renderizado por el cliente, esto no es un problema. Esto es con lo que trabajaremos en este post.
Empecemos
Como quiero que esta publicación se centre en Shoelace y en su naturaleza de componente web, usaré Esbelto para todo. yo tambien estare usando esto proyecto stackblitz para demostración Construiremos esta demostración juntos, paso a paso, pero siéntase libre de abrir ese REPL en cualquier momento para ver el resultado final.
Te mostraré cómo usar Shoelace y, lo que es más importante, cómo personalizarlo. Hablaremos de DOM en la sombra y qué estilos bloquean del mundo exterior (así como cuáles no). También hablaremos de la ::part Selector de CSS, que puede ser completamente nuevo para usted, e incluso veremos cómo Shoelace nos permite anular y personalizar sus diversas animaciones.
Si encuentra que le gusta Shoelace después de leer esta publicación y quiere probarlo en un proyecto React, mi consejo es usar una envoltura como mencioné en la introducción. Esto le permitirá usar cualquiera de los componentes de Shoelace, y puede eliminarse por completo una vez que React envíe las correcciones del componente web que ya tienen (búsquelo en la versión 19).
Introduciendo Cordón
Shoelace tiene bastante detallado instrucciones de instalación. En su forma más simple, puede volcar y etiquetas en su documento HTML, y eso es todo. Sin embargo, para cualquier aplicación de producción, probablemente querrá importar selectivamente solo lo que desee, y también hay instrucciones para eso.
Con Shoelace instalado, vamos a crear un componente Svelte para representar algún contenido y luego sigamos los pasos para personalizarlo por completo. Para elegir algo bastante no trivial, opté por las pestañas y los componentes de un cuadro de diálogo (comúnmente conocido como modal). Aquí hay algunas marcas tomado en gran parte de los documentos:
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
Hello World!
Esto genera algunas pestañas agradables y con estilo. El subrayado en la pestaña activa incluso se anima muy bien y se desliza de una pestaña activa a la siguiente.
No perderé su tiempo revisando cada centímetro de las API que ya están bien documentadas en el sitio web de Shoelace. En su lugar, veamos cuál es la mejor manera de interactuar y personalizar por completo estos componentes web.
Interactuando con la API: métodos y eventos
Llamar a métodos y suscribirse a eventos en un componente web puede ser ligeramente diferente de lo que está acostumbrado con su marco normal de elección, pero no es demasiado complicado. Veamos cómo.
Pestañas
El componente de pestañas () tiene un show Método, que muestra manualmente una pestaña en particular. Para llamar a esto, necesitamos obtener acceso al elemento DOM subyacente de nuestras pestañas. En Svelte, eso significa usar bind:this. En React, sería un ref. Y así. Como estamos usando Svelte, declaremos una variable para nuestro tabs ejemplo:
let tabs;
…y átelo:
Ahora podemos agregar un botón para llamarlo:
Es la misma idea para eventos. Hay una sl-tab-show evento que se dispara cuando se muestra una nueva pestaña. Podríamos usar addEventListener en nuestra tabs variable, o podemos usar Svelte on:event-name atajo.
console.log(e)}>Eso funciona y registra los objetos de eventos a medida que muestra diferentes pestañas.
Por lo general, representamos pestañas y permitimos que el usuario haga clic entre ellas, por lo que este trabajo generalmente ni siquiera es necesario, pero está ahí si lo necesita. Ahora hagamos que el componente de diálogo sea interactivo.
Diálogo
El componente de diálogo () toma un open prop que controla si el diálogo está... abierto. Declarémoslo en nuestro componente Svelte:
let tabs;
let open = false;
También tiene un sl-hide evento para cuando el diálogo está oculto. Pasemos nuestro open apuntalar y unir a la hide event para que podamos restablecerlo cuando el usuario haga clic fuera del contenido del cuadro de diálogo para cerrarlo. Y agreguemos un controlador de clics a ese botón de cerrar para configurar nuestro open apoyar a false, que también cerraría el cuadro de diálogo.
open = false}>
Hello World!
Por último, conectemos nuestro botón de diálogo abierto:
Y eso es eso. Interactuar con la API de una biblioteca de componentes es más o menos sencillo. Si eso es todo lo que hizo esta publicación, sería bastante aburrido.
Pero Shoelace, al estar construido con componentes web, significa que algunas cosas, en particular los estilos, funcionarán de manera un poco diferente a lo que estamos acostumbrados.
¡Personaliza todos los estilos!
Al momento de escribir este artículo, Shoelace todavía está en versión beta y el creador está considerando cambiar algunos estilos predeterminados, posiblemente incluso eliminando algunos predeterminados por completo para que ya no anulen los estilos de su aplicación host. Los conceptos que cubriremos son relevantes de cualquier manera, pero no se sorprenda si algunas de las especificaciones de Shoelace que menciono son diferentes cuando vaya a usarlo.
Por agradables que sean los estilos predeterminados de Shoelace, es posible que tengamos nuestros propios diseños en nuestra aplicación web y querremos que nuestros componentes UX coincidan. Veamos cómo lo haríamos en un mundo de componentes web.
No intentaremos en realidad mejorar cualquier cosa. El creador de Shoelace es mucho mejor diseñador de lo que jamás seré. En su lugar, solo veremos cómo el cambio cosas, para que puedas adaptarlas a tus propias aplicaciones web.
Un recorrido rápido por los Shadow DOM
Eche un vistazo a uno de esos encabezados de pestañas en sus DevTools; debería verse algo como esto:
Nuestro elemento de pestaña ha creado un div recipiente con un .tab y .tab--active clase, y una tabindex, al mismo tiempo que muestra el texto que ingresamos para esa pestaña. Pero observe que está sentado dentro de un raíz de sombra. Esto permite a los autores del componente web agregar su propio marcado al componente web al mismo tiempo que proporciona un lugar para el contenido. we proveer. Observe la ¿elemento? Eso básicamente significa "poner cualquier contenido que el usuario represente entre las etiquetas del componente web esta página."
Entonces el El componente crea una raíz de sombra, le agrega algo de contenido para representar el encabezado de la pestaña con un estilo agradable junto con un marcador de posición () que representa nuestro contenido en el interior.
Estilos encapsulados
Uno de los problemas clásicos y más frustrantes en el desarrollo web siempre han sido los estilos en cascada a lugares donde no los queremos. Es posible que le preocupe que cualquier regla de estilo en nuestra aplicación que especifique algo como div.tab interferiría con estas pestañas. Resulta que esto no es un problema; las raíces sombreadas encapsulan los estilos. Los estilos desde fuera de la raíz de la sombra no afectan lo que está dentro de la raíz de la sombra (con algunas excepciones de las que hablaremos), y viceversa.
Las excepciones a esto son los estilos heredados. Usted, por supuesto, no necesita aplicar un font-family estilo para cada elemento de su aplicación web. En su lugar, puede especificar su font-family una vez, en :root or html y haz que herede en todas partes debajo de él. Esta herencia, de hecho, perforará la raíz de la sombra también.
Propiedades personalizadas de CSS (a menudo llamadas "variables css") son una excepción relacionada. Un shadow root puede leer absolutamente una propiedad CSS que se define fuera del shadow root; esto será relevante en un momento.
El ::part selector
¿Qué pasa con los estilos que no heredar. ¿Qué pasa si queremos personalizar algo como cursor, que no hereda, en algo dentro de la raíz de la sombra. ¿No tenemos suerte? Resulta que no lo somos. Eche otro vistazo a la imagen del elemento de pestaña de arriba y su raíz de sombra. Observe la part Atributo en el div? Eso le permite apuntar y diseñar ese elemento desde fuera de la raíz de la sombra usando el ::part selector. Vamos a caminar a través de un ejemplo es un poco.
Anular estilos de cordones
Veamos cada uno de estos enfoques en acción. A partir de ahora, bastante de los estilos Shoelace, incluidas las fuentes, reciben valores predeterminados de las propiedades personalizadas de CSS. Para alinear esas fuentes con los estilos de su aplicación, anule los accesorios personalizados en cuestión. Ver los docs para obtener información sobre qué variables CSS está usando Shoelace, o simplemente puede inspeccionar los estilos en cualquier elemento dado en DevTools.
Heredar estilos a través de la raíz de la sombra
Abra la app.css presentar en el src directorio de la Proyecto Stack Blitz. En la :root sección en la parte inferior, debería ver un letter-spacing: normal; declaración. Desde el letter-spacing propiedad es heredable, intente establecer un nuevo valor, como 2px. Al guardar, todo el contenido, incluidos los encabezados de pestañas definidos en la raíz oculta, se ajustará en consecuencia.
Sobrescritura de variables CSS de Shoelace
El componente lee un --indicator-color Propiedad personalizada de CSS para el subrayado de la pestaña activa. Podemos anular esto con algo de CSS básico:
sl-tab-group {
--indicator-color: green;
}Y así, ¡ahora tenemos un indicador verde!
Consultando partes
En la versión de Shoelace que estoy usando ahora (2.0.0-beta.83), cualquier pestaña que no esté deshabilitada tiene un pointer cursor. Cambiemos eso a un cursor predeterminado para la pestaña activa (seleccionada). Ya vimos que el elemento agrega un part="base" atributo en el contenedor para el encabezado de la pestaña. Además, la pestaña actualmente seleccionada recibe un active atributo. Usemos estos hechos para apuntar a la pestaña activa y cambiar el cursor:
sl-tab[active]::part(base) {
cursor: default;
}¡Y eso es eso!
Personalización de animaciones
Como guinda del pastel metafórico, veamos cómo Shoelace nos permite personalizar las animaciones. Shoelace utiliza el API de animaciones web, y expone una setDefaultAnimation API para controlar cómo los diferentes elementos animan sus diversas interacciones. Consulte los documentos para obtener información específica, pero a modo de ejemplo, así es como puede cambiar la animación de diálogo predeterminada de Shoelace para que no se expanda hacia afuera y se reduzca hacia adentro, sino que se anime desde la parte superior y se despliegue hacia abajo mientras se oculta.
import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
setDefaultAnimation("dialog.show", {
keyframes: [
{ opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
],
options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
keyframes: [
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
{ opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
],
options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});Ese código está en el App.svelte expediente. Coméntalo para ver la animación original predeterminada.
Terminando
Shoelace es una biblioteca de componentes increíblemente ambiciosa que está construida con componentes web. Dado que los componentes web son independientes del marco, se pueden usar en cualquier proyecto, con cualquier marco. Con nuevos marcos que comienzan a aparecer con características de rendimiento sorprendentes y también facilidad de uso, la capacidad de usar widgets de experiencia de usuario de calidad que no están vinculados a ningún marco nunca ha sido más convincente.
