Web Components in 2025 — Shadow DOM, Custom Elements and Lit

Ein vollstaendiger Leitfaden zu Web Components im Jahr 2025. Custom Elements, Shadow DOM, HTML Templates, Lit-Framework und Integration mit React, Vue und Svelte.

Einfuehrung in Web Components¶

Web Components sind eine Reihe von Webplattform-APIs, mit denen Sie neue benutzerdefinierte, wiederverwendbare und gekapselte HTML-Tags erstellen koennen. Sie funktionieren in allen modernen Browsern und koennen mit jeder JavaScript-Bibliothek oder jedem Framework verwendet werden.

Die vier Hauptspezifikationen von Web Components sind: - Custom Elements - Neue HTML-Elemente definieren - Shadow DOM - Gekapseltes DOM und Styling - HTML Templates - Wiederverwendbare Markup-Muster - ES Modules - Standard-Modulsystem

Custom Elements¶

Custom Elements ermoeglichen die Definition neuer HTML-Elemente mit eigenem Verhalten:

class MyButton extends HTMLElement {
  constructor() {
    super();

    // Shadow DOM anhaengen
    this.attachShadow({ mode: 'open' });

    // Template erstellen
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background: #007acc;
          color: white;
          border: none;
          padding: 10px 20px;
          cursor: pointer;
        }
      </style>
      <button>
        <slot></slot>
      </button>
    `;
  }

  connectedCallback() {
    this.shadowRoot.querySelector('button')
      .addEventListener('click', this.handleClick.bind(this));
  }

  handleClick() {
    this.dispatchEvent(new CustomEvent('my-click', {
      detail: { timestamp: Date.now() }
    }));
  }
}

customElements.define('my-button', MyButton);

Shadow DOM¶

Shadow DOM bietet Kapselung fuer DOM-Struktur und Styling:

class IsolatedComponent extends HTMLElement {
  constructor() {
    super();

    // Shadow DOM erstellen
    const shadow = this.attachShadow({ mode: 'open' });

    // Styles sind auf diese Komponente beschraenkt
    shadow.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 20px;
          border: 1px solid #ccc;
        }

        .title {
          color: blue;
          font-size: 18px;
        }
      </style>

      <div class="title">
        <slot name="title">Standardtitel</slot>
      </div>
      <div class="content">
        <slot>Standardinhalt</slot>
      </div>
    `;
  }
}

customElements.define('isolated-component', IsolatedComponent);

Lit-Framework¶

Lit ist eine einfache Bibliothek zum Erstellen schneller, leichtgewichtiger Web Components:

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('user-card')
export class UserCard extends LitElement {
  static styles = css`
    :host {
      display: block;
      padding: 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  `;

  @property() name = '';
  @property() avatar = '';
  @property({ type: Boolean }) online = false;

  render() {
    return html`
      <div class="user">
        <img class="avatar" src="${this.avatar}" alt="${this.name}">
        <h3>${this.name}</h3>
        <span class="status">${this.online ? 'Online' : 'Offline'}</span>
      </div>
    `;
  }
}

Framework-Integration¶

Web Components funktionieren mit jedem Framework:

<!-- React -->
<my-button onClick={handleClick}>Klick mich</my-button>

<!-- Vue -->
<my-button @my-click="handleClick">Klick mich</my-button>

<!-- Svelte -->
<my-button on:my-click={handleClick}>Klick mich</my-button>

Best Practices¶

1. Lit fuer komplexe Komponenten verwenden - Bessere DX als Vanilla Web Components
2. Auf Wiederverwendbarkeit achten - Komponenten framework-agnostisch gestalten
3. Korrektes Event Handling - CustomEvents fuer Komponentenkommunikation verwenden
4. Style-Kapselung - Shadow DOM fuer Stilisolierung nutzen
5. Barrierefreiheit - ARIA-Muster und semantisches HTML befolgen

Web Components bieten einen standardbasierten Ansatz zum Erstellen wiederverwendbarer UI-Komponenten, die frameworkuebergreifend funktionieren und mit der Weiterentwicklung der Webplattform weiterhin funktionieren werden.