---
title: Document.registerElement()
slug: Web/API/Document/registerElement
tags:
  - API
  - DOM
  - Veraltet
  - Web Components
translation_of: Web/API/Document/registerElement
---
<p>{{APIRef("DOM")}}</p>

<div class="warning">
<p><strong>Warnung: </strong>document.registerElement() läuft zu Gunsten von <a href="/en-US/docs/Web/API/CustomElementRegistry/define">customElements.define()</a> aus.</p>
</div>

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

<p>Die <code><strong>document.registerElement()</strong></code>-Methode registriert ein neues <a href="/en-US/docs/Web/Web_Components/Custom_Elements">benutzerdefiniertes Element</a> im Browser und gibt einen Konstruktor für das neue Element zurück.</p>

<div class="note">
<p><strong>Hinweis:</strong> Dies ist eine experimentelle Technologie. Der Browser, der sie benutzen soll, muss Web Components unterstützen. Siehe <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Web Components in Firefox erlauben</a>.</p>
</div>

<h2 id="Syntax">Syntax</h2>

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

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt><em>tag-name</em></dt>
 <dd>Der Name des benutzerdefinierten Elements. Der Name muss einen Bindestrich (-) enthalten, zum Beispiel <code>my-tag</code>.</dd>
 <dt><em>options {{optional_inline}}</em></dt>
 <dd>
 <p>Ein Objekt mit den Eigenschaften <strong>prototype</strong>, auf dem das benutzerdefinierte Element basieren soll, und <strong>extends</strong>, einem bestehenden Tag, der erweitert werden soll. Beide sind optional.</p>
 </dd>
</dl>

<h2 id="Beispiel">Beispiel</h2>

<p>Hier ist ein einfaches Beispiel:</p>

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

<p>Der Tag ist num im Browser registriert. Die <code>Mytag</code>-Variable enthält einen Konstruktor, der benutzt werden kann, um ein <code>my-tag</code>-Element wie folgt im Dokument zu erzeugen:</p>

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

<p>Das fügt ein leeres <code>my-tag</code>-Element ein, dass sichtbar wird, wenn die Entwicklerwerkzeuge des Browsers benutzt werden aber nicht, wenn mit Hilfe des Brwoser der Quellcode betrachtet wird. So lange dem Tag kein Inhalt beigefügt wird, wird es auch in der normalen Browser-Ansicht nicht sichtbar sein. Inhalt kann beispielsweise folgendermaßen hinzugefügt werden:</p>

<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
mytag.textContent = "I am a my-tag element.";
</pre>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>35</td>
   <td>31<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>4.4.4</td>
   <td>31<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Diese API ist hinter einer Einstellung versteckt.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a dir="ltr" href="/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li>
</ul>