Un peu sur les bibliothèques de composants Web

Une série d’actualités sur les composants Web a récemment traversé mon bureau, alors j’ai pensé le regrouper ici.

À mon avis, l'un des meilleurs cas d'utilisation des composants Web est celui des bibliothèques de modèles. Au lieu de faire, disons,

comme vous le feriez dans Bootstrap ou
comme vous le feriez dans Bulma, vous utiliseriez un élément personnalisé, comme .

La nouvelle bibliothèque Shoelace utilise le sl espace de noms pour leurs composants. Il s’agit d’une bibliothèque de modèles complète entièrement en composants Web. Donc les onglets il y a éléments.

Pourquoi est-ce bien? Eh bien, d'une part, cela apporte un modèle de composant à la fête. Cela signifie que si vous travaillez sur un composant, il a un modèle et une feuille de style qui sont co-localisés. Jetant un coup d'œil sous le capot de Shoelace, vous pouvez voir que tout est basé sur Stencil.

Une autre raison pour laquelle il est bon est que cela signifie que les composants peuvent (et ils le font) utiliser le DOM Shadow. Cela offre une forme d'isolement qui vient directement de la plate-forme Web. Pour les gens CSS comme nous, cela signifie que le style d'un onglet dans le composant onglet se fait avec un .tab class (hey, wow, cool) mais il est isolé dans ce composant. Même avec ce nom générique, je ne peux pas accidentellement jouer avec un autre composant de la page qui utilise cette classe générique, ni aucun autre CSS extérieur ne va gâcher les tripes ici. Le Shadow DOM est une sorte de mur de sécurité qui empêche les styles de s'échapper ou de s'infiltrer.

Je viens de voir le framework FAST¹, qui est également un ensemble de composants. Il comporte des onglets définis comme . Cela me rappelle une autre chose que j'aime à propos des composants Web en tant qu'approche de bibliothèque de modèles: si j'ai l'impression qu'il est piloté par API, même en commençant par le nom du composant lui-même, qui est littéralement ce que vous utilisez dans le HTML. Les attributs de cet élément peuvent être entièrement constitués. Il semble que la norme émergente est que vous n’avez même pas à data-* préfixez les attributs que vous créez également pour contrôler le composant. Donc, si je devais créer un composant onglets, cela pourrait être .

Ionic est peut-être le plus gros acteur utilisant des composants Web pour une bibliothèque de modèles. Leurs onglets sont , et vous pouvez les utiliser sans impliquer aucun autre framework (bien qu'ils prennent en charge Angular, React et Vue en plus de leur propre Stencil). Ionic a fait beaucoup de progrès avec ce matériel Web Components, le plus récemment supportant Shadow Parts. Voici Brandy Carney expliquant à nouveau l'encapsulation:

Shadow DOM est utile pour empêcher les styles de s'échapper des composants et de s'appliquer involontairement à d'autres éléments. Par exemple, nous attribuons un .button classe à notre ion-button composant. Si un utilisateur Ionic Framework définissait la classe .button sur l'un de leurs propres éléments, il hériterait des styles de boutons Ionic dans les versions précédentes du framework. Puisque ion-button est maintenant un composant Shadow Web, ce n'est plus un problème.

Cependant, en raison de cette encapsulation, les styles ne peuvent pas non plus se fondre dans les éléments internes d’un composant Shadow. Cela signifie que si un composant Shadow rend des éléments à l'intérieur de son arbre d'ombres, un utilisateur n'est pas en mesure de cibler l'élément interne avec son CSS.

L'encapsulation est une bonne chose, mais elle rend effectivement le style «plus difficile» (exprès). Il y a un concept CSS important à connaître: Les propriétés personnalisées CSS pénètrent dans le Shadow DOM. Cependant, il a été décidé – et je pense à juste titre – que «variabliser» chaque élément d'un système de conception n'est pas une manière intelligente d'avancer. Au lieu de cela, ils donnent à chaque bit de HTML dans le DOM Shadow une partie, comme

, ce qui donne ensuite la possibilité de «pénétrer de l'extérieur» avec CSS, comme custom-component::part(icon) { }.

Je pense que les crochets de style basés sur des pièces sont généralement bons, et une façon intelligente d'avancer pour les bibliothèques de modèles comme celle-ci, mais j'admets qu'une partie de cela me dérange. Les sélecteurs ne fonctionnent pas comme prévu. Par exemple, vous ne pouvez pas sélectionner des éléments de manière conditionnelle. Vous ne pouvez pas non plus sélectionner d’enfants ni utiliser la cascade. En d’autres termes, c’est juste une fois, ou comme si vous atteigniez directement une membrane avec votre main. Vous pouvez tendre la main et saisir l’objet ou non, mais vous ne pouvez rien faire d’autre.

En parlant de choses qui dérangent les gens, Andrea Giammarchi a un bon point sur l'état récent des composants Web:

Chaque bibliothèque qui démarre, y compris la mienne, suggère que nous devrions importer la bibliothèque afin de définir ce (sic) supposé être un "Élément personnalisé portable».

Google suggère toujours LitElement. Microsoft souhaite que vous utilisiez FASTElement. Stencil a son propre composant. hyperHTML a son propre composant. Personne n'utilise simplement des composants Web «bruts». C'est étrange! Ce qui me semble le pire, c'est que les composants Web sont censés être cette «plate-forme native», ce qui signifie que nous ne devrions pas avoir à acheter une technologie particulière afin de les utiliser. Lorsque nous le faisons, nous sommes aussi bloqués que nous le serions si nous utilisions simplement React ou autre.

Andrea a quelques idées dans cet article, notamment l'utilisation d'une nouvelle bibliothèque plus petite. Je pense que ce que j'aimerais voir, c'est une bibliothèque de modèles qui n'utilise aucune bibliothèque du tout.