---
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">Compatibilité des navigateurs</h2>

<p>{{Compat("api.Window.customElements")}}</p>