aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/window/customelements/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/window/customelements/index.md')
-rw-r--r--files/fr/web/api/window/customelements/index.md68
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>