Composants Web : une introduction

Dans le développement Web moderne, les frameworks font fureur. Presque tous les frameworks modernes ont le concept de composants. L'idée derrière les composants est de diviser votre logique frontale en petits morceaux réutilisables que vous pouvez partager sur plusieurs pages ou projets. En général, ces composants ne sont pas réutilisables dans d'autres frameworks et nécessiteront un processus de construction pour les compiler en JavaScript pouvant s'exécuter dans le navigateur.

Et si je vous disais qu'il existe un moyen de créer des composants à l'aide de JavaScript Vanilla et d'API de navigateur largement disponibles que vous pouvez partager entre les frameworks ? C'est désormais une réalité avec les composants Web. Ici, nous allons jeter un coup d'œil rapide aux différents types de composants Web et à certains des pouvoirs que nous pouvons exercer avec eux.

Les bases des composants Web

Les composants Web sont définis à l'aide du registre d'éléments personnalisés. Il s’agit d’une API fournie par la plupart des navigateurs modernes. Pour créer un composant Web, il vous suffit de le définir dans le code, puis de l'enregistrer dans le registre des éléments personnalisés. Une fois enregistré et défini à l'aide des bonnes conventions de dénomination, le composant est disponible pour être utilisé dans la page.

customElements.define("my-component", MyComponentClass);

Types de composants Web

Les composants Web peuvent être divisés en deux catégories différentes. Il s'agit des Composants Web autonomes et des Éléments intégrés personnalisés.

Les composants Web autonomes sont une extension de la classe générique HTMLElement. Ces composants sont généralement plus flexibles, car vous créez essentiellement votre propre élément HTML avec le pouvoir de personnaliser tous les comportements à partir de zéro. Cela inclut l'élément racine utilisé pour le rendu du composant. Une fois définis, vous utilisez les composants Web autonomes comme n'importe quel autre élément HTML.

<my-button>



<p><strong>Custom Built-In Elements</strong> extend specific HTML elements.  For example, you may extend the HTMLButtonElement class or the HTMLAnchorElement.  These are meant to augment the functionality of existing HTML elements. To use a Custom Built-In element, you use the "is" attribute on the HTML element you are augmenting to tell it that it is an instance of the Web Component.<br>
</p>

<pre class="brush:php;toolbar:false"><button is="my-button">



<h3>
  
  
  Naming Web Components
</h3>

<p>When defining a Web Component, there are certain conventions that must be followed.  </p>

<p>Generally you will name your components similar to HTML elements with your own prefix attached to keep things simple (i.e. <my-button>).  The basic rules require that the element name start with a lowercase letter, and it must include a hyphen.  These guidelines will get you by for most cases, but I would recommend looking at the HTML spec if you're curious about all rules.<br>


<pre class="brush:php;toolbar:false"><!--Valid-->
<my-button/>
<your-button/>

<!--Invalid-->
<My-button/>
<1234-button/>
<Mybutton/>

Crochets de cycle de vie

Les composants Web ont des hooks de cycle de vie spécifiques qui sont utilisés pour réagir aux différentes phases que traverse le composant. Les crochets sont les suivants :

• connectedCallback -> S'exécute lorsque le composant est attaché au DOM.
• disconnectedCallback -> S'exécute lorsque le composant est détaché du DOM.
• adoptedCallback -> S'exécute chaque fois que le composant est attaché à un nouveau DOM.
• attributeChangedCallback -> S'exécute lorsqu'un attribut de la liste des "observedAttributes" est mis à jour.

class MyComponent extends HTMLElement {
    static observedAttributes = ["btntype"]
    connectedCallback() {
        // Handle when the component is attached to the DOM
    }
    disconnectedCallback() {
        // Handle when the component is removed from the DOM
    }
    adoptedCallback() {
        // Handle when the component is attached to a new DOM
    }
    attributeChangedCallback(name, oldValue, newValue) {
        // Trigged when the "btntype" attribute is changed since it is in the list of observedAttributes.
        // "name" will be the name of the attribute that changed.
        // "oldValue" is the value before the change.
        // "newValue" is the new value after the change.
    }
}

Ces hooks de cycle de vie sont utilisés pour effectuer tout travail d'initialisation ou de nettoyage requis lors de la création/destruction d'instances de composants. L'attributChangedCallback est particulièrement utile, car il permet de réagir aux mises à jour des valeurs d'attribut. Les composants Web ont un attribut statique spécial appelé "observedAttributes", qui est censé être un tableau de noms d'attributs (chaînes) qui déclencheront l'attributChangedCallback.

Accessibilité

L'accessibilité est une considération importante dans tout développement Web réalisé aujourd'hui. En ce qui concerne les composants Web, vous utilisez les attributs ARIA comme vous le feriez dans du HTML standard ou dans un framework, mais de manière générale, vous hériterez des rôles intégrés et des fonctionnalités d'accessibilité des éléments HTML que vous utilisez.

Toutes les mêmes directives s'appliquent ici que partout ailleurs. Par exemple, assurez-vous que vous utilisez du HTML sémantique lors de la création de vos composants, ajoutez toute la gestion du clavier nécessaire et assurez-vous que des éléments tels que la mise au point et le contraste des couleurs sont gérés correctement.

Le DOM de l'Ombre

Le Shadow DOM est probablement la partie la plus déroutante et la plus controversée des composants Web. Le Shadow DOM est essentiellement une partie distincte du DOM qui réside dans un composant Web

Le Shadow DOM concerne principalement les composants Web autonomes, car les éléments intégrés personnalisés ne font que s'ajouter aux éléments HTML existants. Pour les composants Web autonomes, la balise personnalisée représentant l'élément (c'est-à-dire ) est considérée comme l'élément « hôte ». Dans l'élément hôte se trouve la "racine fantôme". C'est dans la racine fantôme que se trouve le balisage du composant.

Voici un exemple où vous verrez l'élément "my-button" comme hôte, avec le Shadow DOM à l'intérieur.

Lors de la création de composants Web, vous pouvez définir deux modes pour le Shadow DOM. Ces modes sont « ouvert » et « fermé ». Les Shadow DOM ouverts sont accessibles avec JavaScript en dehors de la racine Shadow dans le Light DOM, contrairement aux Shadow DOM fermés.

customElements.define("my-component", MyComponentClass);

Tous les styles que vous définissez dans le Shadow DOM sont limités au Shadow DOM et ne polluent pas le reste du document. Les styles définis dans le "Light DOM" (le reste du document) ne pénètrent pas dans le Shadow DOM (les variables CSS sont une exception, mais nous n'y reviendrons pas ici). Les navigateurs modernes proposent des moyens de cibler le Shadow DOM directement à partir du Light DOM en utilisant CSS à l'aide de parties. Vous pouvez ajouter des pièces au Shadow DOM de votre composant en ajoutant des attributs de pièce à votre balisage. Ces parties peuvent ensuite être ciblées en CSS à l'aide du pseudo-sélecteur ::part. C’est extrêmement pratique, mais c’est assez limité par nature. Vous ne pouvez pas enchaîner les sélecteurs enfants du sélecteur ::part. Vous ne pouvez cibler que l'élément spécifique qui a un attribut « partie » dans le Shadow DOM.

L'accessibilité est également une considération importante lorsque vous travaillez avec le Shadow DOM. Si vous avez déjà travaillé avec des attributs ARIA, alors vous connaissez « aria-describeby » et « aria-labelledby », qui reçoivent généralement un identifiant faisant référence à un autre élément contenant une étiquette ou une description du contenu pour les lecteurs d'écran. Le Shadow DOM conserve les identifiants dans une portée séparée, similaire aux styles, de sorte que vous ne pouvez pas référencer un identifiant qui réside dans le Shadow DOM à partir du Light DOM et vice versa. Cela peut présenter un défi lorsque vous essayez de fournir des descriptions détaillées que vous devez fournir de manière dynamique, mais il existe des solutions de contournement que nous n'aborderons pas dans cette introduction.

Modèles et emplacements

Les modèles et les emplacements sont des outils qui peuvent être utilisés en combinaison avec le Shadow DOM pour améliorer les composants Web. Les modèles sont utilisés pour créer des extraits réutilisables dans les composants Web, tandis que les emplacements sont utilisés pour exposer des « trous » dans lesquels le contenu du Light DOM peut être transmis.

Les modèles sont pratiques s'il existe un extrait de code HTML que vous devez restituer encore et encore dans un composant Web. Ils peuvent également être utilisés en dehors des composants Web, mais ont des cas d'utilisation plus limités. Ils sont implémentés à l'aide de la balise "template".

Les emplacements sont utilisés pour transmettre du contenu du Light DOM vers un composant Web et sont implémentés à l'aide de la balise "slot". Ceci est pratique si vous disposez d'un composant générique qui peut nécessiter la transmission de contenu dynamique. Un bon exemple peut être un composant de carte générique, dans lequel vous pourriez avoir un emplacement exposé pour transmettre le balisage dans le corps de la carte. Les emplacements ont un attribut « nom » que vous pouvez fournir pour identifier de manière unique l'emplacement. Ceci est pratique si vous devez placer plusieurs emplacements dans un composant Web. Lorsque vous transmettez du contenu, vous pouvez simplement transmettre un attribut avec la valeur slot="your-slot-name" et le contenu sera transmis à l'emplacement portant le nom correspondant.

Les machines à sous et le Shadow DOM ont une interaction unique qui mérite d'être notée. Les emplacements peuvent avoir un contenu par défaut qui s'affiche dans le cas où rien n'est transmis. Le contenu transmis dans les emplacements vit dans le Light DOM et est « copié superficiellement » dans le Shadow DOM. Vous pouvez le voir visuellement dans l'inspecteur du navigateur. Le contenu de l'emplacement sera rendu dans le composant Web, mais dans le DOM, le contenu réside techniquement en dehors du composant Web et fournit un lien vers l'emplacement.

Cela étant dit, cela signifie que tout le contenu des machines à sous est stylisé et référencé comme tout autre contenu du Light DOM. Les styles du Light DOM auront un impact sur le contenu des emplacements, contrairement aux styles Shadow DOM. Des API sont disponibles pour interagir avec le contenu des emplacements à partir du composant Web.

Prise en charge des composants Web

Les composants Web sont assez bien pris en charge dans les navigateurs modernes. La principale exception est Safari, qui ne prend pas en charge les éléments intégrés personnalisés. Si vous devez prendre en charge des navigateurs plus anciens comme Internet Explorer 11, vous devrez polyfiller certaines choses.

Exemples de base

Maintenant que nous avons eu une brève introduction de tous les concepts de base, jetons un coup d'œil à quelques exemples.

Éléments personnalisés autonomes

Voici un exemple d'élément personnalisé autonome appelé "my-button" :

customElements.define("my-component", MyComponentClass);

La première chose à remarquer est que le code est pratiquement le même. Les plus grandes différences sont que nous étendons directement le HTMLButtonElement, puis nous déclarons également que nous étendons le bouton lorsque nous définissons l'élément personnalisé.

Nous passons également beaucoup moins de temps à écrire le code pour le rendu de l'élément. Puisque nous étendons le HTMLButtonElement, le composant n'est qu'un bouton HTML avec une puissance supplémentaire. Nous indiquerons à un bouton HTML qu'il s'agit d'un "mon-bouton" en utilisant l'attribut HTML "is".

Voici l'exemple en live :

Encore une fois, vous remarquerez que nous utilisons l'attribut "is" pour augmenter l'élément de bouton HTML existant. Vous remarquerez également que, tout comme avec les éléments personnalisés autonomes, nous pouvons attacher des écouteurs d'événements et travailler avec le bouton comme nous le ferions pour n'importe quel autre élément HTML, ce qui a de toute façon plus de sens ici car il ne s'agit littéralement que d'un bouton HTML étendu.

Conclusion

Les composants Web sont un moyen simple de résoudre le problème de la création de composants partageables qui peuvent être réutilisés sur différentes pages et projets. Ils fonctionnent davantage comme des éléments HTML normaux, ce qui peut prêter à confusion, mais en fin de compte, ils peuvent être extrêmement utiles et aider à résoudre bon nombre des mêmes problèmes ciblés par les frameworks modernes.

Ici, nous avons jeté un coup d'œil très introductif aux composants Web, aux différents concepts qui les entourent et à quelques exemples rapides illustrant leur fonction de base. À partir de là, nous pouvons commencer à approfondir la façon dont nous pouvons faciliter leur construction et leur utilisation, et examiner comment nous pouvons résoudre certains de leurs problèmes.

Si vous êtes intéressé, n'hésitez pas à consulter les exemples dans GitHub, ou vous pouvez jouer avec eux dans Code Pen.

• Exemple d'élément personnalisé autonome
• Exemple d'élément intégré personnalisé
• Exemple de modèles de base bonus !

Dans le prochain article, nous verrons comment nous pouvons développer l'utilisation des modèles et des emplacements, et comment nous pouvons faciliter le rendu. Restez à l'écoute !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!