Les éléments personnalisés font partie des spécifications de la norme Web Components , ainsi que les importations Shadow DOM, Templates et HTML.
De la spécification:
Les éléments personnalisés permettent aux auteurs de créer leurs propres éléments DOM complets. Bien que les auteurs puissent toujours utiliser des éléments non standard dans leurs documents, avec un comportement spécifique à l'application ajouté après coup par des scripts ou similaires, ces éléments ont toujours été non conformes et peu fonctionnels. En définissant un élément personnalisé, les auteurs peuvent indiquer à l'analyseur comment construire correctement un élément et comment les éléments de cette classe doivent réagir aux changements.
Histoire
La spécification est maintenant à v1 . La version précédente, v0, était prise en charge depuis Chrome 33 , et avait une API différente, utilisant document.registerElement- qui est maintenant obsolète .
Usage
Les éléments personnalisés peuvent être autonomes (créer un nouvel élément à partir de zéro (c'est-à-dire étendre HTMLElement ) ou personnaliser un élément HTML existant (tel que HTMLButtonElement).
// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });
Le deuxième paramètre de l' customElements.define()appel est le nom de la classe implémentant le comportement de l'élément. Voir les exemples dans la spécification pour les éléments autonomes et pour les éléments intégrés personnalisés .
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// Draw some fancy animation effects!
});
}
}
Les éléments personnalisés sont pris en charge nativement dans certains navigateurs modernes et peuvent être remplis de manière polyvalente pour les navigateurs plus anciens remontant à Safari 7+ et IE11. Voir aussi le polyfill v1 .
Modèles et DOM fantôme
En utilisant Templates et Shadow DOM dans un élément personnalisé, vous pouvez rendre l'élément plus facile à manipuler et réutilisable.
Les modèles permettent d'utiliser HTML pour déclarer la structure des éléments personnalisés:
<!-- Template Definition -->
<template id="fancy-element-template">
<style>
...
</style>
<div id="container">
<p>Some fancy markup goes here...</p>
</div>
</template>
<!-- Custom Element usage -->
<fancy-element></fancy-element>
Le Shadow DOM permet aux styles, identifiants et classes du contenu d'être étendus à lui-même. Cela empêche le saignement CSS ou l'accès aux éléments internes de l'élément personnalisé de l'extérieur.
customElements.define('fancy-element', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const t = document.querySelector('#fancy-element-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
...
});
Apprendre encore plus
Articles des développeurs Google :
