HTML Custom Elements erstellen und verwenden: Wiederverwendbare Komponenten mit System

Ich will in Projekten keine Copy-Paste-Logik sehen. Ich will Bausteine, die ich einmal sauber baue und dann überall nutzen kann. Genau dafür sind HTML Custom Elements da. Wenn du HTML Custom Elements erstellen und verwenden wiederverwendbarer komponenten willst, brauchst du kein Framework, um anzufangen. Du brauchst ein klares Prinzip: ein Element, eine Aufgabe, überall wiederverwendbar.

Was sind HTML Custom Elements überhaupt?

Custom Elements sind eigene HTML-Tags, die du selbst definierst. Statt nur mit <div>, <section> oder <button> zu arbeiten, baust du zum Beispiel ein <user-card> oder <price-tag>.

Der Vorteil ist brutal einfach:

• weniger Duplikate
• bessere Wartbarkeit
• klarere Struktur
• sauberer wiederverwendbarer Code

Wenn ich dieselbe UI-Komponente dreimal baue, ist das kein System. Das ist dreifache Arbeit mit dreifachem Fehlerpotenzial. Custom Elements lösen genau dieses Problem.

HTML Custom Elements erstellen und verwenden: Die zwei Kernideen

Es gibt zwei Dinge, die du verstehen musst:

1. Autonomous Custom Elements – eigene Tags wie <my-button>
2. Customized Built-in Elements – Erweiterungen bestehender Elemente wie ein spezieller Button

In der Praxis nutzt du fast immer autonome Custom Elements. Die sind leichter zu bauen und breiter kompatibel im Denkmodell. Ich würde damit starten.

Wie ich ein Custom Element baue

Ein Custom Element basiert auf JavaScript. Du definierst eine Klasse und registrierst sie mit customElements.define(). Das klingt technisch, ist aber simpel.

class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      

        
Max Mustermann
        
Frontend Developer
      
    `;
  }
}

customElements.define('user-card', UserCard);

Danach kannst du das Element im HTML verwenden:

<user-card></user-card>

Das ist die Basis. Kein Framework. Kein Build-Overkill. Einfach ein wiederverwendbarer Baustein.

Warum ich Custom Elements für wiederverwendbare Komponenten nutze

Weil sie mir helfen, in Komponenten zu denken statt in Seitenblöcken. Das ist ein großer Unterschied.

Wenn ich eine Komponente baue, frage ich mich:

• Was ist die eine Aufgabe dieses Elements?
• Welche Daten braucht es?
• Wie oft werde ich es wiederverwenden?
• Welche Teile müssen flexibel sein?

So entsteht Code, der nicht nur heute funktioniert, sondern auch in sechs Monaten noch Sinn ergibt.

HTML Custom Elements erstellen und verwenden richtig: Meine Regeln

Ich halte mich an ein paar einfache Regeln. Die machen den Unterschied zwischen sauberer Architektur und Chaos.

• Eine Komponente = ein klarer Zweck
• Keine Logik doppelt schreiben
• Attribute für Konfiguration nutzen
• Inhalte möglichst flexibel halten
• Namensgebung mit Bindestrich – z. B. product-card

Wichtig: Der Bindestrich ist Pflicht. Ohne ihn akzeptiert der Browser den Namen nicht als Custom Element.

Daten per Attribut übergeben

Custom Elements werden erst stark, wenn du sie steuerbar machst. Dafür nutze ich Attribute.

class PriceTag extends HTMLElement {
  static get observedAttributes() {
    return ['price'];
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const price = this.getAttribute('price') || '0';
    this.innerHTML = `${price} €`;
  }
}

customElements.define('price-tag', PriceTag);

<price-tag price="49"></price-tag>

Das ist simpel und stark. Ich kann denselben Baustein mit anderen Werten mehrfach nutzen, ohne neuen Code zu schreiben.

Shadow DOM: Wann ich es nutze und wann nicht

Der Shadow DOM kapselt Styles und Markup. Das klingt gut, und oft ist es das auch. Aber ich setze ihn nicht blind ein.

Ich nutze Shadow DOM, wenn ich:

• Style-Kollisionen vermeiden will
• eine echte Kapselung brauche
• ein Element komplett unabhängig machen will

Ich nutze ihn nicht, wenn:

• das Element bewusst leicht anpassbar sein soll
• globale Styles sinnvoll sind
• SEO oder einfache Integration Priorität haben

Mehr dazu findest du bei der MDN-Dokumentation zu Web Components.

Die häufigsten Fehler bei wiederverwendbaren Komponenten

Ich sehe immer wieder dieselben Fehler. Die kosten Zeit und machen Komponenten unnötig kompliziert.

• Zu viel Logik im Element statt klare Trennung
• Keine Wiederverwendbarkeit, obwohl es der Zweck sein sollte
• Hardcodierte Inhalte statt konfigurierbarer Daten
• Unsaubere Namen, die später niemand mehr versteht
• Kein Lifecycle-Verständnis, dadurch Bugs beim Einfügen oder Aktualisieren

Mein Ansatz ist einfach: Wenn eine Komponente nicht mehrfach nutzbar ist, ist sie meistens zu speziell gebaut.

So baue ich Komponenten, die wirklich wiederverwendbar sind

Wenn ich wiederverwendbare Komponenten baue, arbeite ich nach einem klaren Ablauf:

1. Ich definiere die Aufgabe der Komponente.
2. Ich reduziere sie auf die kleinste sinnvolle Funktion.
3. Ich mache die Eingaben über Attribute oder Properties steuerbar.
4. Ich prüfe, ob ich Inhalte dynamisch austauschen kann.
5. Ich teste die Komponente in mindestens zwei echten Szenarien.

Das Ziel ist nicht, eine schöne Demo zu bauen. Das Ziel ist ein Baustein, der im echten Projekt Zeit spart.

Wann Custom Elements die beste Wahl sind

Ich verwende Custom Elements besonders dann, wenn ich:

• ein kleines bis mittleres UI-System bauen will
• Framework-unabhängig arbeiten will
• Komponenten in verschiedenen Projekten wiederverwenden möchte
• Legacy-Code schrittweise modernisieren will

Wenn du tiefer einsteigen willst, sind die offiziellen Informationen auf WHATWG HTML Standard und MDN CustomElementRegistry sehr nützlich.

Fazit: HTML Custom Elements erstellen und verwenden bringt dir echte Skalierung

Ich mag Custom Elements, weil sie mich zwingen, sauber zu denken. Weniger Chaos. Mehr Struktur. Mehr Wiederverwendbarkeit. Wenn du HTML Custom Elements erstellen und verwenden wiederverwendbarer komponenten ernst nimmst, baust du nicht mehr nur Seiten. Du baust ein System, das mit dir wächst.

Und genau das macht den Unterschied zwischen Basteln und professionellem Frontend.