---
title: Document.registerElement()
slug: Web/API/Document/registerElement
tags:
  - API
  - Composants Web
  - DOM
  - Expérimental(2)
  - Méthode
  - Référence(2)
translation_of: Web/API/Document/registerElement
---
<p>{{APIRef("DOM")}} {{Deprecated_header}}</p>

<div class="warning">
<p><strong>Warning : </strong>document.registerElement() est déprécié en faveur de <a href="https://developer.mozilla.org/fr/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p>
</div>

<p>{{draft}}</p>

<p>La méthode <code><strong>Document.registerElement()</strong></code> permet d'enregistrer un nouvel <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">élément personnalisé</a> dans le navigateur, et retourne un constructeur pour ce nouvel élément.</p>

<div class="note">
<p><strong>Note:</strong> Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les Composants Web dans Firefox</a>.</p>
</div>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">var <em>constructeur</em> = document.registerElement(<em>nom-tag</em>, <em>options</em>);</pre>

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><em>nom-tag</em></dt>
 <dd>
 <div class="syntaxbox">Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple <code>mon-tag</code>.</div>
 </dd>
 <dt><em>options {{optional_inline}}</em></dt>
 <dd>Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.</dd>
</dl>

<h2 id="Exemple">Exemple</h2>

<p>Voici un exemple très simple :</p>

<pre class="brush: js">var Montag = document.registerElement('mon-tag');
</pre>

<p>Le nouveau tag est désormais enregistré dans le navigateur. La variable <code>Montag</code> contient un constructeur que vous pouvez utiliser pour créer des éléments <code>mon-tag</code> dans le document de la façon suivante :</p>

<pre class="brush: js">document.body.appendChild(new Montag());</pre>

<p>Ceci insert un élément <code>mon-tag</code> vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :</p>

<pre class="brush: js">var montag = document.getElementsByTagName("mon-tag")[0];
montag.textContent = "Je suis un élément mon-tag.";
</pre>

<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>

<p>{{Compat("api.Document.registerElement")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li>
</ul>