React, Angular, Vue.js, Svelte - die Liste der JavaScript-Frameworks wächst stetig. Doch mit Web Components gibt es einen standardisierten Ansatz, der direkt in Browser eingebaut ist. Bedeutet das das Ende des Framework-Dschungels?

Was sind Web Components?

Web Components sind ein Satz von Web-Plattform-APIs, die es ermöglichen, wiederverwendbare, benutzerdefinierte HTML-Elemente zu erstellen. Der Standard besteht aus vier Haupttechnologien:

1. Custom Elements

Custom Elements ermöglichen es, eigene HTML-Tags zu definieren:

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button { 
          background: #007bff; 
          color: white; 
          border: none;
          padding: 10px 20px;
          border-radius: 4px;
        }
      </style>
      <button><slot></slot></button>
    `;
  }
}

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

Verwendung im HTML:

<my-button>Klick mich</my-button>

2. Shadow DOM

Shadow DOM kapselt CSS und DOM eines Components, sodass Styles nicht nach außen dringen und von außen nicht beeinflusst werden:

const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = '<style>/* gekapselte Styles */</style>';

3. HTML Templates

Das <template>-Element ermöglicht das Definieren von wiederverwendbarem HTML, das nicht sofort gerendert wird:

<template id="my-template">
  <div class="card">
    <h2><slot name="title">Default Title</slot></h2>
    <p><slot name="content">Default Content</slot></p>
  </div>
</template>

4. ES Modules

JavaScript-Module ermöglichen das Importieren und Exportieren von Funktionen, Klassen und Components:

import { MyButton } from './my-button.js';

Vorteile von Web Components

Framework-Agnostisch

Web Components funktionieren mit jedem Framework oder ganz ohne Framework. Ein einmal erstelltes Component kann in React, Angular, Vue oder reinem HTML verwendet werden.

Standardisiert

Im Gegensatz zu Framework-spezifischen Components sind Web Components ein Web-Standard, der von allen modernen Browsern unterstützt wird.

Kapselung

Durch Shadow DOM sind Styles und DOM sauber gekapselt. Keine Konflikte mit globalen Styles mehr.

Zukunftssicher

Als Browser-Standard werden Web Components langfristig unterstützt, unabhängig davon, welches Framework gerade populär ist.

Nachteile und Herausforderungen

Weniger Funktionalität out-of-the-box

Web Components bieten keine eingebaute Zustandsverwaltung, kein Routing und keine reaktive Datenbindung wie moderne Frameworks.

Größerer Boilerplate-Code

Für einfache Components ist mehr Code nötig als beispielsweise in React:

// Web Component
class Counter extends HTMLElement {
  constructor() {
    super();
    this._count = 0;
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.render();
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this._count++;
      this.render();
    });
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <button>Count: ${this._count}</button>
    `;
  }
}

// React Equivalent
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Tooling und Entwicklerfahrung

Frameworks wie React bieten ausgereiftere Developer Tools, Hot Reloading und ein besseres Debugging-Erlebnis.

Web Components und Frameworks - Koexistenz statt Konkurrenz

In der Praxis schließen sich Web Components und Frameworks nicht aus. Es gibt mehrere sinnvolle Kombinationen:

1. Shared Components

Für Design-Systeme oder Component-Libraries, die framework-übergreifend genutzt werden sollen, sind Web Components ideal.

2. Micro-Frontends

Bei Micro-Frontend-Architekturen können verschiedene Teams unterschiedliche Frameworks nutzen, während sie über Web Components interagieren.

3. Framework-Wrapper

Libraries wie Lit oder Stencil vereinfachen die Erstellung von Web Components und bieten Framework-ähnliche Features wie reaktive Properties.

// Mit Lit
import { LitElement, html, css } from 'lit';

class MyCounter extends LitElement {
  static properties = {
    count: { type: Number }
  };
  
  constructor() {
    super();
    this.count = 0;
  }
  
  render() {
    return html`
      <button @click=${() => this.count++}>
        Count: ${this.count}
      </button>
    `;
  }
}

Fazit

Web Components werden Frameworks wie React nicht ersetzen, aber sie werden eine wichtige Rolle spielen - besonders für wiederverwendbare UI-Components und Micro-Frontends. Die Zukunft liegt wahrscheinlich in einer Kombination: Frameworks für die Anwendungslogik und Web Components für portable, gekapselte UI-Bausteine.

Bei innFactory beobachten wir die Entwicklung von Web Components genau und setzen sie dort ein, wo sie Sinn ergeben - insbesondere bei der Entwicklung von Design-Systemen und der Integration unterschiedlicher Technologie-Stacks.