Heim > Artikel > Web-Frontend > Einführung in Webkomponenten: Erstellen wiederverwendbarer UI-Elemente

Einführung in Webkomponenten: Erstellen wiederverwendbarer UI-Elemente

Mary-Kate OlsenOriginal: 2024-10-25 12:27:30265Durchsuche

In der modernen Webentwicklung sind Wiederverwendbarkeit und Modularität zu wichtigen Faktoren beim Aufbau skalierbarer und wartbarer Anwendungen geworden. Da die Komplexität von Webanwendungen zunimmt, suchen Entwickler nach Möglichkeiten, ihren Code, insbesondere die Benutzeroberfläche (UI), effizient zu verwalten. Hier kommen Webkomponenten ins Spiel.

Webkomponenten ermöglichen es Entwicklern, wiederverwendbare, gekapselte UI-Elemente zu erstellen, die unabhängig vom Framework oder der Bibliothek in verschiedenen Webanwendungen verwendet werden können. In diesem Blog befassen wir uns damit, was Webkomponenten sind, wie sie funktionieren und warum sie die Webentwicklung grundlegend verändern können.

Also, fangen wir an!

Was sind Webkomponenten?

Introduction to Web Components: Creating Reusable UI Elements

Webkomponenten sind eine Reihe von Webplattform-APIs, die es Entwicklern ermöglichen, benutzerdefinierte, wiederverwendbare HTML-Elemente mit ihrem eigenen Verhalten und Stil zu erstellen. Diese Elemente sind unabhängig und gekapselt, was bedeutet, dass sie nicht vom Stil oder Verhalten anderer Komponenten auf der Seite beeinflusst werden.

Webkomponenten basieren im Kern auf drei Haupttechnologien:

Benutzerdefinierte Elemente: Mit diesen können Sie Ihre eigenen HTML-Tags und das zugehörige Verhalten definieren.
Shadow DOM: Dies hilft bei der Kapselung der Stile und Markups und stellt sicher, dass die interne Struktur der Komponente verborgen bleibt und von externen Stilen nicht beeinflusst wird.
HTML-Vorlagen: Vorlagen stellen wiederverwendbare HTML-Blöcke bereit, die bei Bedarf in das DOM gestempelt werden können, und bieten so eine Möglichkeit, wiederverwendbare Benutzeroberflächen zu definieren, ohne sie sofort zu rendern.

Zusammen ermöglichen Ihnen diese Technologien die Erstellung von Komponenten, die in sich geschlossen und in verschiedenen Teilen Ihrer Anwendung oder sogar in verschiedenen Projekten wiederverwendbar sind.
Warum Webkomponenten verwenden?

Webkomponenten bieten mehrere Vorteile, die sie zu einer überzeugenden Wahl für Entwickler machen:

Wiederverwendbarkeit: Sie können Komponenten einmal erstellen und überall verwenden, was den Entwicklungsprozess beschleunigt.
Kapselung: Mit Shadow DOM können Sie sicherstellen, dass die Stile und die Logik innerhalb der Komponente den Rest Ihrer Anwendung nicht beeinträchtigen.
Framework-Agnostisch: Webkomponenten funktionieren in jedem Framework und sind daher äußerst vielseitig. Egal, ob Sie React, Angular, Vue oder einfaches HTML verwenden, Sie können Webkomponenten mühelos integrieren.
Interoperabilität: Webkomponenten können problemlos zwischen Projekten, Teams und sogar zwischen Organisationen geteilt werden, wodurch Zusammenarbeit und Standardisierung gefördert werden.

So erstellen Sie eine einfache Webkomponente

Da wir nun verstanden haben, was Webkomponenten sind, schauen wir uns an, wie man eine solche erstellt. Wir beginnen mit der Erstellung einer einfachen benutzerdefinierten Schaltflächenkomponente mit nativem JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Button Component</title>
</head>
<body>

  <my-button>Click Me!</my-button>

  <script>
    class MyButton extends HTMLElement {
      constructor() {
        super();

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

        // Create button element
        const button = document.createElement('button');
        button.textContent = this.textContent;

        // Add styles
        const style = document.createElement('style');
        style.textContent = `
          button {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
          }
          button:hover {
            background-color: darkblue;
          }
        `;

        // Append the button and style to the Shadow DOM
        this.shadowRoot.append(style, button);
      }
    }

    // Define the new element
    customElements.define('my-button', MyButton);
  </script>
</body>
</html>

In diesem Beispiel:

Wir erstellen eine Klasse MyButton, die HTMLElement erweitert und es uns ermöglicht, ein neues HTML-Tag zu definieren.
Innerhalb des Konstruktors fügen wir ein Shadow DOM an, um die interne Struktur der Komponente zu kapseln.
Wir definieren den Stil der Schaltfläche mit dem Befehl