diff options
Diffstat (limited to 'files/fr/web/api/window/customelements/index.md')
-rw-r--r-- | files/fr/web/api/window/customelements/index.md | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/files/fr/web/api/window/customelements/index.md b/files/fr/web/api/window/customelements/index.md new file mode 100644 index 0000000000..7d7d57c203 --- /dev/null +++ b/files/fr/web/api/window/customelements/index.md @@ -0,0 +1,68 @@ +--- +title: Window.customElements +slug: Web/API/Window/customElements +tags: + - API + - CustomElementRegistry + - Property + - Reference + - Web Components + - Window + - custom elements +translation_of: Web/API/Window/customElements +--- +<div>{{APIRef}}</div> + +<p>La propriété en lecture seule <code>customElements</code> de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations sur des éléments personnalisés enregistrés.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre>let registreElementsPersonnalises = window.customElements;</pre> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.</p> + +<h2 id="Examples">Exemples</h2> + +<p>L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :</p> + +<pre>let registreElementsPersonnalises = window.customElements; +registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);</pre> + +<p>Cependant, il est généralement raccourci en quelque chose comme :</p> + +<pre>customElements.define('details-element', + class extends HTMLElement { + constructor() { + super(); + const modele = document + .getElementById('modele-details-element') + .content; + const racineOmbre = this.attachShadow({mode: 'open'}) + .appendChild(template.cloneNode(true)); + } +});</pre> + +<p>Voir notre repo <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> pour davantage d'exemples d'utilisation.</p> + +<h2 id="Specification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Window.customElements")}}</p> |