Étendre les éléments intégrés

La spécification définit les éléments personnalisés autonomes (qui étendent la classe d’élément HTML et s’utilisent comme <my-card>) et les éléments personnalisés intégrés (qui étendent une classe native précise et s’utilisent comme <button is="my-button">). Les éléments intégrés personnalisés héritent automatiquement des sémantiques natives.

Un élément autonome <my-button> ne bénéficie d’aucun comportement intégré de <button> : aucune activation avec Entrée ou Espace, aucune participation aux formulaires et aucun role="button" pour les technologies d’assistance. Un bouton personnalisé (is="my-button") hérite automatiquement de tout cela.

Étendez la classe HTML spécifique plutôt que HTMLElement : class MyButton extends HTMLButtonElement {}. L’élément conserve tous les comportements intégrés — soumission des formulaires, gestion du focus et état désactivé — auxquels vous ajoutez vos améliorations.

customElements.define("my-button", MyButton, { extends: "button" }). Le troisième argument indique au registre quelle balise native l’élément étend. Sans cet argument, l’enregistrement échoue.

Utilisez les éléments personnalisés intégrés avec l’attribut is sur la balise existante : <button is="my-button">Click</button>. Écrire <my-button> à la place créerait un élément autonome et lui ferait perdre le comportement intégré.

Safari a refusé d’implémenter les éléments personnalisés intégrés, invoquant des problèmes d’accessibilité. Ils fonctionnent dans Chrome, Edge et Firefox ; dans Safari, l’attribut is est ignoré et l’élément se comporte comme un simple <button>. Utilisez la couche de compatibilité officielle si la prise en charge de Safari est nécessaire.

La couche de compatibilité @ungap/custom-elements rétablit la prise en charge des éléments personnalisés intégrés dans Safari. Elle est légère et bien entretenue ; incluez-la si votre équipe a besoin d’une prise en charge inter-navigateurs sans abandonner le modèle fondé sur l’attribut is.

Si la prise en charge de Safari sans couche de compatibilité est importante, créez plutôt un élément autonome et reproduisez manuellement le comportement nécessaire : ajoutez role="button", tabindex="0", des gestionnaires de clavier pour Entrée et Espace, ainsi que l’association aux formulaires via l’API ElementInternals.

Les éléments autonomes peuvent participer à la soumission des formulaires en définissant static formAssociated = true et en utilisant this.attachInternals(). L’objet ElementInternals renvoyé fournit setFormValue et setValidity pour une intégration complète aux formulaires.

Choisissez les éléments personnalisés intégrés pour les composants qui se comportent principalement comme un élément natif (un bouton avancé, un champ intelligent) et si votre plateforme cible Chrome ou Firefox, ou si vous acceptez la couche de compatibilité. Choisissez les éléments autonomes pour des composants entièrement nouveaux (cartes, boîtes de dialogue) sans équivalent natif.

L’erreur la plus courante avec les composants web consiste à créer <my-button> comme élément autonome. Il ne soumettra pas les formulaires, ne réagira pas à Entrée ou Espace et ne sera pas annoncé comme un bouton. Étendez plutôt HTMLButtonElement ou reproduisez soigneusement chaque comportement d’un véritable bouton.

Quel est l’avantage pratique, pour un composant de type bouton, d’étendre la classe HTML native d’un bouton (élément intégré personnalisé) plutôt que la classe HTML générique (élément autonome) ?

Les éléments intégrés personnalisés étendent une classe HTML précise, comme celle des boutons ou des champs, et s’utilisent via l’attribut is, tout en héritant de tous les comportements natifs. Enregistrez-les avec l’option { extends: "button" }. Safari ne les prend pas en charge nativement : utilisez une couche de compatibilité ou des éléments autonomes avec une reproduction manuelle du comportement lorsqu’une prise en charge complète des navigateurs est nécessaire.