Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.
La méthode define()
de l'interface CustomElementRegistry
définie un nouvel élément personnalisé.
Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
Syntaxe
customElements.define(nom, constructeur, options);
Paramètres
- nom
- Nom du nouvel élément personnalisé.
- constructeur
- Constructeur du nouvel élément personnalisé.
- options Facultatif
- Objet qui contrôle la manière dont l'élément est définit. Une option est actuellement supportée:
extends
. Une chaîne de caratères spécifiant le nom de l'élément intégré à étendre. Utilisé pour créer un élément personnalisé intégré.
Valeur retournée
Aucune.
Exemples
Élément personnalisé autonome
Les constructeurs de ces éléments doivent étendre HTMLElement
.
class BasicElement extends HTMLElement { connectedCallback() { this.textContent = 'Juste un élément de base.'; } } customElements.define('basic-element', BasicElement);
<basic-element><basic-element>
Élément personnalisé intégré
Note: Bien que défini dans les spécifications, ce n'est actuellement pas pris en charge dans les navigateurs.
En plus des améliorations que nous ajoutons, ce qui suit se comportera comme un <button>
:
class PlasticButton extends HTMLButtonElement { constructor() { super(); this.addEventListener("click", () => { // Dessiner des effets d'animation fantaisistes! }); } } // L'attribut "extends" est requis pour, et utilisable par, // les éléments personnalisés intégrés. customElements.define("plastic-button", PlasticButton, { extends: "button" });
<!-- Ceci *FONCTIONNERA* --> <button is="plastic-button">Click Me!</button> <!-- L'élément personnalisé autonome ci-dessous *NE FONCTIONNERA PAS* à cause de notre définition en JavaScript ci-dessus qui utilise "extends". L'élément ci-dessous n'obtiendra donc pas le comportement défini ci-dessus ni ne sera différent de tout autre élément HTML inconnu. --> <plastic-button>Click me</plastic-button>
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
HTML Living Standard La définition de 'customElements.define()' dans cette spécification. |
Standard évolutif | Définition initiale. |
Compatibilité navigateur
Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support de base | Pas de support[1] | 59.0 | Pas de support | 47.0 | 10.1 |
Éléments personnalisés intégrés | Pas de support | Pas de support | Pas de support | Pas de support | Pas de support |
Fonctionnalité | Firefox Mobile (Gecko) | Chrome for Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support de base | Pas de support | 56.0 | Pas de support | 47.0 | 10.1 |
Éléments personnalisés intégrés | Pas de support | 56.0 | Pas de support | 47.0 | Pas de support |
[1] Tant que Firefox ne supportera pas customElements.define()
, il continuera de supporter la méthode dépréciée document.registerElement()
.