Un poco sobre bibliotecas de componentes web

Recientemente, una serie de noticias sobre componentes web llegaron a mi escritorio, así que pensé en agruparlas aquí.

En mi opinión, uno de los mejores casos de uso de componentes web son las bibliotecas de patrones. En lugar de hacer, digamos, ulcomo lo haría en Bootstrap o divcomo lo haría en Bulma, usaría un elemento personalizado, como designsystem-tabs.

La nueva biblioteca Shoelace utiliza el slespacio de nombres para sus componentes. Es una biblioteca de patrones completa completamente en componentes web. Entonces las pestañas tienen sl-tab-groupelementos.

¿Por qué es eso bueno? Bueno, por un lado, trae un componente modelo a la fiesta. Eso significa que, si está trabajando en un componente, tiene una plantilla y una hoja de estilo que están ubicadas juntas. Al mirar debajo del capó de Shoelace, puedes ver que todo esto está basado en Stencil.

Otra razón por la que es bueno es que significa que los componentes pueden (y lo hacen) usar Shadow DOM. Esto ofrece una forma de aislamiento que proviene directamente de la plataforma web. Para la gente de CSS como nosotros, eso significa que el estilo de una pestaña en el componente de pestaña se realiza con una .tabclase (oye, guau, genial), pero está aislado en ese componente. Incluso con ese nombre genérico, no puedo alterar accidentalmente algún otro componente en la página que usa esa clase genérica, ni ningún otro CSS externo va a alterar las entradas aquí. Shadow DOM es una especie de muro de seguridad que evita que los estilos se filtren o se filtren.

Acabo de ver también el marco FAST ¹, que también es un conjunto de componentes. Tiene pestañas que se definen como fast-tabs. Eso me recuerda otra cosa que me gusta de los componentes web como enfoque de biblioteca de patrones: parece que está impulsado por API, incluso comenzando con el nombre del componente en sí, que es literalmente lo que se usa en HTML. Los atributos de ese elemento se pueden inventar por completo. Parece que el estándar emergente es que ni siquiera es necesario data-*anteponer los atributos que también se crean para controlar el componente. Entonces, si tuviera que crear un componente de pestañas, podría ser chris-tabs active-tab="lunch" variation="rounded".

Quizás el jugador más importante que utilice componentes web para una biblioteca de patrones sea Ionic. Sus pestañas son ion-tabsy puedes usarlas sin involucrar ningún otro marco (aunque admite Angular, React y Vue además de su propia plantilla). Ionic ha logrado muchos avances con estos componentes web y, más recientemente, admitió Shadow Parts. Aquí está Brandy Carney explicando nuevamente la encapsulación:

Shadow DOM es útil para evitar que los estilos se escapen de los componentes y se apliquen involuntariamente a otros elementos. Por ejemplo, asignamos una .buttonclase a nuestro ion-buttoncomponente. Si un usuario de Ionic Framework configura la clase .buttonen uno de sus propios elementos, heredaría los estilos de los botones Ionic en versiones anteriores del framework. Como ion-buttonahora es un componente web oculto, esto ya no es un problema.

Sin embargo, debido a esta encapsulación, los estilos tampoco pueden fusionarse con los elementos internos de un componente Shadow. Esto significa que si un componente Shadow representa elementos dentro de su árbol de sombra, un usuario no podrá apuntar al elemento interno con su CSS.

La encapsulación es algo bueno, pero de hecho hace que el estilo sea “más difícil” (a propósito). Es importante conocer un concepto de CSS: las propiedades personalizadas de CSS penetran en Shadow DOM . Sin embargo, se decidió (y creo que con razón) que “variar” cada elemento de un sistema de diseño no es una forma inteligente de avanzar. En cambio, le dan a cada bit de HTML dentro de Shadow DOM una parte, como div part="icon", lo que luego nos da la capacidad de “alcanzar desde el exterior” con CSS, como custom-component::part(icon) { }.

Creo que los ganchos de estilo basados ​​​​en partes están en su mayoría bien y son una forma inteligente de avanzar para bibliotecas de patrones como esta, pero admito que una parte me molesta. Los selectores no funcionan como cabría esperar. Por ejemplo, no puedes seleccionar cosas condicionalmente. Tampoco puede seleccionar niños ni utilizar la cascada. En otras palabras, es algo único, o como si estuvieras atravesando una membrana con la mano. Puedes acercarte y agarrar la cosa o no, pero no puedes hacer nada más.

Hablando de cosas que molestan a la gente, Andrea Giammarchi tiene un buen punto sobre el estado reciente de los componentes web:

Cada biblioteca que comienza, incluida la mía, sugiere que deberíamos importar la biblioteca para definir lo que [sic] se supone que es un “elemento personalizado portátil”.

Google siempre sugiere LitElement. Microsoft quiere que utilice FASTElement. La plantilla tiene su propio componente. hyperHTML tiene su propio componente. Nadie utiliza simplemente componentes web “en bruto”. ¡Es raro! Lo que me parece la peor parte de esto es que se supone que los componentes web son una “plataforma nativa”, lo que significa que no deberíamos necesitar comprar alguna tecnología en particular para poder utilizarlos. Cuando lo hacemos, estamos tan atados a eso como lo estaríamos si solo usáramos React o lo que sea.

Andrea tiene algunas ideas en este artículo, incluido el uso de una biblioteca nueva y más pequeña. Creo que lo que me gustaría ver es una biblioteca de patrones que simplemente no utilice ninguna biblioteca.

1. FAST se autodenomina “sistema de interfaz” y luego “marco de interfaz de usuario” en oraciones consecutivas en la página de inicio. Shoelaces se autodenomina “biblioteca”, pero yo la llamo “biblioteca de patrones”. Considere que “sistema de diseño” es el término más utilizado para describir el concepto, pero a menudo se utiliza de forma más amplia que una tecnología específica. FAST usa ese término en el código mismo para el elemento contenedor que controla el tema. Yo diría que la terminología en torno a todo esto está lejos de estar establecida.