Window : propriété customElements
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété en lecture seule customElements de l'interface Window retourne une référence à l'objet global CustomElementRegistry, qui peut être utilisé pour enregistrer de nouveaux éléments personnalisés et obtenir des informations sur les éléments personnalisés déjà enregistrés.
Le registre global est utilisé pour enregistrer des éléments personnalisés par défaut, mais une racine d'ombre peut choisir d'utiliser un registre d'éléments personnalisés avec portée afin d'éviter d'éventuels conflits dans les noms d'éléments définis.
Valeur
Un objet CustomElementRegistry.
Exemples
Utilisation simple
L'exemple le plus courant que vous voyez de cette propriété utilisée est d'accéder à la méthode CustomElementRegistry.define() pour définir et enregistrer un nouvel élément personnalisé.
Par exemple :
let registreElementsPersonnalises = window.customElements;
registreElementsPersonnalises.define(
"mon-element-personnalise",
MonElementPersonnalise,
);
Notez que la classe d'élément personnalisé est couramment définie directement à l'intérieur de l'appel define(), comme illustré :
customElements.define(
"details-element",
class extends HTMLElement {
constructor() {
super();
const modele = document.getElementById("modele-details-element");
const racineOmbre = this.attachShadow({ mode: "open" }).appendChild(
document.importNode(modele.content, true),
);
}
},
);
Voir notre dépôt web-components-examples (angl.) pour davantage d'exemples d'utilisation.
Spécifications
| Spécification |
|---|
| HTML # dom-window-customelements |