Faire des composants Web pour différents contextes

Cet article ne concerne pas la façon de créer des composants Web, Caleb Williams a récemment écrit un guide détaillé. Discutons de la façon de les utiliser, quels facteurs doivent être pris en compte lors de la construction et comment les utiliser efficacement dans votre projet.

Si vous êtes nouveau dans les composants Web, le guide de Caleb vaut la peine d'être lu, mais voici quelques ressources qui peuvent vous aider à démarrer rapidement:

• Composants Web - l'approche "correcte"
• Shadow Dom v1: composants Web autonomes
• Composants Web sur MDN
• Composants Web impressionnants
• Composants Web ouverts recommandés

Avec les composants Web, désormais largement pris en charge (grâce au travail acharné de beaucoup de coulisses) et considérant que Edge passera bientôt à la plate-forme de chrome - les gens voient désormais les composants Web comme un moyen «natif» et compatible avec la plate-forme de créer des composants d'interface utilisateur réutilisables pour maintenir la cohérence entre les systèmes de conception et les projets Web lui-même.

C'est à la fois bien et mal. Mais d'abord, jetons un coup d'œil au triangle de calque abstrait .

Triangle de couche abstraite

Techniquement, nous devons considérer les composants Web comme une extension de notre langage de balisage préféré HTML (oui!). L'API du composant Web nous permet de créer des éléments HTML personnalisés qui n'existent pas dans HTML (par exemple<foo-bar></foo-bar> ).

Certains disent que les composants Web sont essentiellement de nouveaux éléments HTML, nous devons donc les considérer comme faisant partie de la spécification HTML, nous devons donc suivre son paradigme, ses concepts de base et son utilisation. Si nous supposons tous ces points, nous constatons que nos composants existeront au niveau le plus bas de la pile de plate-forme Web, côte à côte avec HTML, CSS et JavaScript. Des cadres et des bibliothèques (tels que React, Vue, Angular, Sveltejs) fonctionnent sur leur couche d'abstraction et s'asseyent au-dessus d'autres outils qui sont dans une sorte de "terre du milieu" tels que les stickjs, les hybrides et éclairés. Sous ces couches d'abstraction, nous pouvons trouver nos technologies Web de base… et les composants Web natifs. Nous pouvons utiliser le diagramme alt ( abstraction la ayer t riangle) pour représenter ce concept:

Pourquoi est-ce important? Il nous aide à visualiser les couches qui existent au-dessus des composants indigènes et à comprendre leur environnement d'utilisation afin qu'ils puissent être construits dans l'environnement prévu. Qu'est-ce que l'environnement? C'est notre objectif.

Même technologie, différents environnements

Shadow Dom est un facteur clé de l'API du composant Web. Il nous permet de regrouper JavaScript et CSS en éléments personnalisés pour empêcher les opérations d'interférence et de style externes, sauf si nous le permettons explicitement. Les développeurs peuvent en effet suivre certains moyens pour permettre aux CSS externes de fuir dans des racines et des composants de l'ombre, y compris les propriétés personnalisées ainsi que :: Part et :: pseudo-éléments du thème, que Monica Dinculescu a une bonne introduction.

Une autre chose à considérer: l'environnement que nous utilisons. Trois ans après avoir personnellement construit mes composants Web, je peux identifier deux environnements: des environnements privés (tels que des systèmes de conception) et des environnements standard (tels que HTML, CSS et JavaScript simples sans styles personnalisés).

Avant de concevoir des composants, nous devons comprendre comment ils seront utilisés, donc la détermination du type d'environnement est la clé de tout cela. Le moyen le plus simple est de cibler un seul environnement, mais avec une petite astuce CSS, nous pouvons construire des composants pour les deux .

Avant de creuser plus profondément, regardons la différence entre les deux environnements.

Environnement privé

Un environnement privé est un écosystème fermé qui fournit des composants avec leurs propres styles et doit être utilisé tel quel. Donc, si nous construisons une bibliothèque de composants à partir d'un guide de style ou d'un système de conception spécifique, chaque composant reflétera un style personnalisé, il n'est donc pas nécessaire de le coder chaque fois que vous en avez besoin.

Il en va de même pour la logique JavaScript. Par exemple, nous pouvons attacher une racine d'ombre fermée pour empêcher les autres de percer accidentellement la limite de l'ombre avec QuerySelector. Par conséquent, nous pouvons simplement sélectionner et utiliser n'importe quel composant pour éviter des problèmes tels que l'incohérence dans les styles et les conflits CSS. En tant qu'auteur, vous pouvez également définir un ensemble de propriétés personnalisées CSS (ou :: parties) qui peuvent être utilisées pour styliser des composants pour un cas d'utilisation spécifique, mais ce n'est pas au centre de la conception du système.

Ceci est un exemple d'utilisation des composants Web dans un environnement privé. Tous ses styles et sa logique sont contenus dans sa racine d'ombre et peuvent être simplement ajoutés à n'importe quelle page.

Cet exemples et ultérieurs sont à des fins de démonstration uniquement et ne sont pas destinés aux environnements de production, car ils ne prennent pas en compte des situations critiques telles que l'accessibilité et d'autres optimisations.

Les composants dans des environnements privés sont rarement utilisés en dehors de cet environnement. Par exemple, si nous essayons d'obtenir un élément d'un système de conception (avec son propre style forcé), nous ne pouvons pas simplement l'ajouter au projet et nous attendre à le personnaliser. Savez-vous comment Bootstrap peut configurer et personnaliser le thème en fonction de vos préférences? C'est exactement le contraire. Ces composants sont destinés à fonctionner dans leur environnement et uniquement dans leur environnement.

Environnement standard

Les environnements standard sont probablement le type de composant le plus complexe, non seulement parce que les environnements peuvent aller des cadres matures tels que Vue et réagir à un HTML natif ordinaire, mais parce que tout le monde devrait être en mesure d'utiliser ce composant comme s'il s'agissait d'un autre élément.

Par exemple, lorsqu'un composant est ajouté publiquement (comme l'ajout de NPM), ceux qui l'utilisent s'attendront à pouvoir le personnaliser, au moins dans une certaine mesure.

Connaissez-vous des éléments HTML avec leur propre style de démonstration? La réponse doit être «non», car les éléments doivent être stylés explicitement à l'aide de CSS. Il en va de même pour les composants Web fabriqués dans un environnement standard. Un seul composant Web doit être personnalisable en ajoutant des classes et des propriétés ou d'autres méthodes.

C'est la même chose que nous le voyons dans l'exemple de l'environnement fermé<todo-list></todo-list> élément, mais il est conçu pour des environnements standard. Il fonctionne tel quel, sans styles de démonstration dans sa racine d'ombre. En fait, il ne contient que la logique nécessaire et le CSS de base pour assurer sa fonctionnalité. Sinon, il peut être personnalisé comme n'importe quel élément HTML standard (comme un div).

Les deux exemples que nous considérons pour chaque environnement ont été fabriqués en utilisant les mêmes composants. La différence est que les composants dans un environnement standard peuvent être personnalisés et sélectionnés à l'aide de CSS externe.

Composants et compositions Web

OK, donc l'utilisation de composants Web est en fait la même que l'utilisation de HTML ordinaire, bien que comme nous pouvons le voir, il est très important de suivre les paradigmes et les principes d'un contenu donné. Ce à quoi nous devons faire attention, c'est la combinaison de composants Web.

Comme l'explique les fondamentaux de Google Web:

Les combinaisons sont l'une des caractéristiques les moins connues de Shadow Dom, mais elles sont sans doute les plus importantes.

Dans notre monde de développement Web, la composition est la façon dont nous créons des applications de manière déclarative à l'aide de HTML. Différents blocs de construction (<div> ,<code><s></s> ,<em></em> ,<strong></strong> ) assembler pour former une application. Certaines de ces balises peuvent même être utilisées entre elles. La combinaison est pourquoi<select></select> ,<details></details> ,<summary></summary> et<video></video> La raison pour laquelle ces éléments indigènes sont si flexibles. Chaque balise accepte certains HTML en tant qu'éléments enfants et effectue des opérations spéciales sur eux. Par exemple,<select></select> Savoir comment<option></option> et<optgroup></optgroup> Rendu comme une liste déroulante et un widget multi-sélection.<details></details> L'élément sera<summary></summary> Présenté comme des flèches extensibles. même<video></video> Sachez également comment gérer certains éléments enfants:<track></track> Les éléments ne sont pas rendus, mais ils affectent le comportement de la vidéo. Comme c'est incroyable! La composition est ce que nous faisons habituellement lors de l'utilisation de HTML. Étant donné qu'un composant Web n'est qu'un élément HTML avec une référence DOM (pas un conteneur logique), nous devons nous fier à des combinaisons pour construire nos composants et tous les sous-composants. Si vous considérez

et<select></select> , vous remarquerez que vous combinez de manière déclarative ces éléments pour obtenir la sortie finale, et vous avez des propriétés spécifiques qui peuvent être utilisées pour le composant principal (par exemple [readonly] ) ou le composant enfant (par exemple [selected] ). Il en va de même pour les composants Web, si vous construisez une liste personnalisée, envisagez de construire le composant principal (<custom-list></custom-list> ) et les sous-composants (<custom-li></custom-li> ). utiliser<slot></slot> Éléments, vous pouvez définir où les éléments enfants seront placés et le contenu de l'espace réservé qui sera affiché lorsque les éléments enfants ne seront pas passés.

Composants Web et accessibilité

Une autre chose à considérer est ce que nous appelons le «petit» thème de l'accessibilité . Étant donné que nous créons un nouvel élément HTML, nous devons considérer l'accessibilité de l'élément afin de fournir des rôles sémantiques de base, toute navigation par clavier et les préférences du système d'exploitation de l'utilisateur telles que les paramètres de mouvement réduits et de contraste élevé.

Je recommande fortement les ressources suivantes comme référence pour construire des composants accessibles et inclusifs, comment définir les balises sémantiques et comment implémenter la navigation de base au clavier.

• Composants inclusifs
• "Effet pour tout le monde" sur web.dev
• Pratique créative Wai-Aria
• Liste de contrôle WebAiM WCAG

en conclusion

Les composants Web sont une technologie émergente dans le développement Web, il n'y a donc pas de meilleures pratiques bien définies pour nous guider lorsqu'il s'agit de les construire en fonction de leur utilisation ou de leur utilisation maximisée. Lorsque vous vous retrouvez à les utiliser, la seule chose que vous pourriez obtenir de ce post est de déterminer s'ils sont des environnements fermés ou standard et de vous demander :

• Qui utilisera ce composant?
• Dans une grande flexibilité que cette personne devrait avoir à la personnaliser?
• Ce composant convient -il à tout le monde ou à un public spécifique?