initial commit

1 files changed, 116 insertions, 0 deletions

diff --git a/files/fr/web/api/window/customelements/index.html b/files/fr/web/api/window/customelements/index.html
new file mode 100644
index 0000000000..cc57a29618
--- /dev/null
+++ b/files/fr/web/api/window/customelements/index.html
@@ -0,0 +1,116 @@
+---
+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" name="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" name="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" name="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" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>window.customElements</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>window.customElements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>