Web API Kochbuch

Kapitel 12. Web-Komponenten

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Einführung

Web Komponenten sind eine Möglichkeit, neue HTML-Elemente mit eigenem Verhalten zu erstellen. Dieses Verhalten wird in einem benutzerdefinierten Element gekapselt.

Eine Komponente erstellen

Du kannst eine Webkomponente erstellen, indem du eine Klasse definierst, die HTMLElement erweitert, wie in Beispiel 12-1 gezeigt.

Beispiel 12-1. Eine Barebone-Webkomponente

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from MyComponent';
  }
}

Wenn du das benutzerdefinierte Element zum DOM hinzufügst, ruft der Browser die Methode connectedCallback auf. Hier befindet sich normalerweise der größte Teil der Logik deiner Komponente. Dies ist einer der Lifecycle-Callbacks. Einige andere Lebenszyklus-Aufrufe sind:

disconnectedCallback

Wird aufgerufen, wenn du das benutzerdefinierte Element aus dem DOM entfernst. Dies ist ein guter Ort, um Aufräumarbeiten zu erledigen, wie z. B. das Entfernen von Ereignis-Listenern.

attributeChangedCallback

Wird aufgerufen, wenn du eines der überwachten Attribute des Elements änderst.

Ein benutzerdefiniertes Element registrieren

Nachdem du deine benutzerdefinierte Elementklasse erstellt hast, musst du sie beim Browser registrieren, bevor du sie in einem HTML-Dokument verwendest. Du kannst dein benutzerdefiniertes Element registrieren, indem du ...