M

MLOG

Deutsch

Entdecken Sie die Leistungsfähigkeit von Web Components mit Fokus auf Custom Elements, um wiederverwendbare und gekapselte UI-Komponenten für verschiedene Webanwendungen zu erstellen.

Web Components: Ein tiefer Einblick in Custom Elements

Web Components stellen einen bedeutenden Fortschritt in der Webentwicklung dar und bieten eine standardisierte Methode zur Erstellung wiederverwendbarer und gekapselter UI-Komponenten. Unter den Kerntechnologien, aus denen Web Components bestehen, ragen Custom Elements als Eckpfeiler für die Definition neuer HTML-Tags mit benutzerdefiniertem Verhalten und Rendering hervor. Dieser umfassende Leitfaden befasst sich mit den Feinheiten von Custom Elements und untersucht deren Vorteile, Implementierung und Best Practices für die Erstellung moderner Webanwendungen.

Was sind Web Components?

Web Components sind eine Reihe von Webstandards, die es Entwicklern ermöglichen, wiederverwendbare, gekapselte und interoperable HTML-Elemente zu erstellen. Sie bieten einen modularen Ansatz für die Webentwicklung und ermöglichen die Erstellung benutzerdefinierter UI-Komponenten, die leicht über verschiedene Projekte und Frameworks hinweg geteilt und wiederverwendet werden können. Die Kerntechnologien hinter Web Components umfassen:

Verständnis von Custom Elements

Custom Elements sind das Herzstück von Web Components und ermöglichen es Entwicklern, das HTML-Vokabular um ihre eigenen Elemente zu erweitern. Diese benutzerdefinierten Elemente verhalten sich wie Standard-HTML-Elemente, können aber auf spezifische Anwendungsanforderungen zugeschnitten werden, was eine größere Flexibilität und Code-Organisation ermöglicht.

Definieren von Custom Elements

Um ein benutzerdefiniertes Element zu definieren, müssen Sie die customElements.define()-Methode verwenden. Diese Methode benötigt zwei Argumente:

  1. Der Elementname: Eine Zeichenkette, die den Namen des benutzerdefinierten Elements darstellt. Der Name muss einen Bindestrich (-) enthalten, um Konflikte mit Standard-HTML-Elementen zu vermeiden. Zum Beispiel ist my-element ein gültiger Name, während myelement es nicht ist.
  2. Die Elementklasse: Eine JavaScript-Klasse, die HTMLElement erweitert und das Verhalten des benutzerdefinierten Elements definiert.

Hier ist ein grundlegendes Beispiel:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Hello, World!';
  }
}

customElements.define('my-element', MyElement);

In diesem Beispiel definieren wir ein benutzerdefiniertes Element namens my-element. Die MyElement-Klasse erweitert HTMLElement und setzt im Konstruktor das innere HTML des Elements auf "Hello, World!".

Lifecycle-Callbacks von Custom Elements

Benutzerdefinierte Elemente haben mehrere Lifecycle-Callbacks, mit denen Sie Code in verschiedenen Phasen des Lebenszyklus des Elements ausführen können. Diese Callbacks bieten Möglichkeiten, das Element zu initialisieren, auf Attributänderungen zu reagieren und Ressourcen zu bereinigen, wenn das Element aus dem DOM entfernt wird.

Hier ist ein Beispiel, das die Verwendung von Lifecycle-Callbacks demonstriert:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `
Mit dem DOM verbunden!
`;
    console.log('Element verbunden');
  }

  disconnectedCallback() {
    console.log('Element getrennt');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);

In diesem Beispiel gibt der connectedCallback() eine Nachricht auf der Konsole aus und setzt das innere HTML des Elements, wenn es mit dem DOM verbunden wird. Der disconnectedCallback() gibt eine Nachricht aus, wenn das Element getrennt wird. Der attributeChangedCallback() wird aufgerufen, wenn sich das data-message-Attribut ändert, und aktualisiert den Inhalt des Elements entsprechend. Der observedAttributes-Getter gibt an, dass wir Änderungen am data-message-Attribut beobachten möchten.

Verwendung von Shadow DOM zur Kapselung

Shadow DOM bietet Kapselung für Webkomponenten, indem es Ihnen ermöglicht, einen separaten DOM-Baum für eine Komponente zu erstellen, der vom Rest der Seite isoliert ist. Das bedeutet, dass im Shadow DOM definierte Stile und Skripte den Rest der Seite nicht beeinflussen und umgekehrt. Diese Kapselung hilft, Konflikte zu vermeiden und stellt sicher, dass sich Ihre Komponenten vorhersagbar verhalten.

Um Shadow DOM zu verwenden, können Sie die attachShadow()-Methode auf dem Element aufrufen. Diese Methode akzeptiert ein Options-Objekt, das den Modus des Shadow DOM angibt. Der mode kann entweder 'open' oder 'closed' sein. Wenn der Modus 'open' ist, kann auf das Shadow DOM von JavaScript aus über die shadowRoot-Eigenschaft des Elements zugegriffen werden. Wenn der Modus 'closed' ist, kann von JavaScript aus nicht auf das Shadow DOM zugegriffen werden.

Hier ist ein Beispiel, das die Verwendung von Shadow DOM demonstriert:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
Dies ist im Shadow DOM.

    `;
  }
}

customElements.define('my-element', MyElement);

In diesem Beispiel hängen wir ein Shadow DOM mit mode: 'open' an das Element an. Wir setzen dann das innere HTML des Shadow DOM, um einen Stil einzuschließen, der die Farbe von Absätzen auf Blau setzt, und ein Absatz-Element mit etwas Text. Der im Shadow DOM definierte Stil wird nur auf Elemente innerhalb des Shadow DOM angewendet und beeinflusst keine Absätze außerhalb des Shadow DOM.

Vorteile der Verwendung von Custom Elements

Custom Elements bieten mehrere Vorteile für die Webentwicklung:

Praktische Beispiele für Custom Elements

Lassen Sie uns einige praktische Beispiele untersuchen, wie Custom Elements zur Erstellung gängiger UI-Komponenten verwendet werden können.

Eine einfache Zähler-Komponente

Dieses Beispiel zeigt, wie man eine einfache Zähler-Komponente mit Custom Elements erstellt.

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        
        ${this._count}
        
      

    `;
  }
}

customElements.define('my-counter', Counter);

Dieser Code definiert eine Counter-Klasse, die HTMLElement erweitert. Der Konstruktor initialisiert die Komponente, hängt ein Shadow DOM an und setzt den anfänglichen Zählerstand auf 0. Die connectedCallback()-Methode fügt Event-Listener zu den Inkrement- und Dekrement-Schaltflächen hinzu. Die increment()- und decrement()-Methoden aktualisieren den Zählerstand und rufen die render()-Methode auf, um das Rendering der Komponente zu aktualisieren. Die render()-Methode setzt das innere HTML des Shadow DOM, um die Zähleranzeige und die Schaltflächen einzuschließen.

Eine Bildkarussell-Komponente

Dieses Beispiel zeigt, wie man eine Bildkarussell-Komponente mit Custom Elements erstellt. Der Kürze halber sind die Bildquellen Platzhalter und könnten dynamisch von einer API, einem CMS oder dem lokalen Speicher geladen werden. Das Styling wurde ebenfalls minimiert.

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  Karussellbild
  

  
  
  

  

  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Dieser Code definiert eine ImageCarousel-Klasse, die HTMLElement erweitert. Der Konstruktor initialisiert die Komponente, hängt ein Shadow DOM an und setzt das anfängliche Bild-Array und den aktuellen Index. Die connectedCallback()-Methode fügt Event-Listener zu den „Zurück“- und „Weiter“-Schaltflächen hinzu. Die nextImage()- und prevImage()-Methoden aktualisieren den aktuellen Index und rufen die render()-Methode auf, um das Rendering der Komponente zu aktualisieren. Die render()-Methode setzt das innere HTML des Shadow DOM, um das aktuelle Bild und die Schaltflächen einzuschließen.

Best Practices für die Arbeit mit Custom Elements

Hier sind einige Best Practices, die Sie bei der Arbeit mit Custom Elements befolgen sollten:

Custom Elements und Frameworks

Custom Elements sind so konzipiert, dass sie mit anderen Webtechnologien und Frameworks interoperabel sind. Sie können in Verbindung mit gängigen Frameworks wie React, Angular und Vue.js verwendet werden.

Verwendung von Custom Elements in React

Um Custom Elements in React zu verwenden, können Sie sie einfach wie jedes andere HTML-Element rendern. Möglicherweise müssen Sie jedoch ein Ref verwenden, um auf das zugrunde liegende DOM-Element zuzugreifen und direkt damit zu interagieren.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Auf die API des Custom Elements zugreifen
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Benutzerdefiniertes Ereignis empfangen:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

In diesem Beispiel verwenden wir ein Ref, um auf das my-element Custom Element zuzugreifen und ihm einen Event-Listener hinzuzufügen. Dies ermöglicht es uns, auf benutzerdefinierte Ereignisse zu lauschen, die vom Custom Element ausgelöst werden, und entsprechend zu reagieren.

Verwendung von Custom Elements in Angular

Um Custom Elements in Angular zu verwenden, müssen Sie Angular so konfigurieren, dass es das Custom Element erkennt. Dies kann durch Hinzufügen des Custom Elements zum schemas-Array in der Konfiguration des Moduls erfolgen.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Sobald das Custom Element registriert ist, können Sie es in Ihren Angular-Templates wie jedes andere HTML-Element verwenden.

Verwendung von Custom Elements in Vue.js

Vue.js unterstützt Custom Elements ebenfalls nativ. Sie können sie direkt in Ihren Templates ohne spezielle Konfiguration verwenden.

Vue erkennt das Custom Element automatisch und rendert es korrekt.

Überlegungen zur Barrierefreiheit

Bei der Erstellung von Custom Elements ist es entscheidend, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihre Komponenten für alle, einschließlich Menschen mit Behinderungen, nutzbar sind. Hier sind einige wichtige Überlegungen zur Barrierefreiheit:

Internationalisierung und Lokalisierung

Bei der Entwicklung von Custom Elements für ein globales Publikum ist es wichtig, Internationalisierung (i18n) und Lokalisierung (l10n) zu berücksichtigen. Hier sind einige wichtige Überlegungen:

Fazit

Custom Elements sind ein leistungsstarkes Werkzeug zur Erstellung wiederverwendbarer und gekapselter UI-Komponenten. Sie bieten mehrere Vorteile für die Webentwicklung, darunter Wiederverwendbarkeit, Kapselung, Interoperabilität, Wartbarkeit und Leistung. Indem Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie Custom Elements nutzen, um moderne Webanwendungen zu erstellen, die robust, wartbar und für ein globales Publikum zugänglich sind. Mit der Weiterentwicklung der Webstandards werden Web Components, einschließlich Custom Elements, immer wichtiger für die Erstellung modularer und skalierbarer Webanwendungen.

Nutzen Sie die Kraft von Custom Elements, um die Zukunft des Webs zu gestalten, eine Komponente nach der anderen. Denken Sie daran, Barrierefreiheit, Internationalisierung und Lokalisierung zu berücksichtigen, um sicherzustellen, dass Ihre Komponenten von jedem und überall genutzt werden können.