suchen

Heim >Web-Frontend >js-Tutorial >So erstellen Sie eine einfache Webkomponente von Grund auf

So erstellen Sie eine einfache Webkomponente von Grund auf

Barbara Streisand
Barbara StreisandOriginal
2025-01-23 01:00:14809Durchsuche

Diese Anleitung zeigt den Aufbau einer wiederverwendbaren Webkomponente: eines einfachen Zählers. Wir nutzen benutzerdefinierte Elemente, Shadow DOM und HTML-Vorlagen. Der fertige Zähler verfügt über Schaltflächen zum Erhöhen und Verringern eines angezeigten numerischen Werts.

How to Build a Simple Web Component from Scratch

Eine vollständige, ausführbare Version dieses Codes ist hier verfügbar.

Voraussetzungen:

Vertrautheit mit grundlegendem JavaScript und ein konzeptionelles Verständnis des DOM (Document Object Model) sind hilfreich, aber nicht unbedingt erforderlich.

Projekt-Setup:

Erstellen Sie zwei Dateien: counter.html (mit der Seitenstruktur) und counter.js (mit der Definition des benutzerdefinierten Elements).

counter.html (Anfangsstruktur):

<code class="language-html"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Counter Component</title>
</head>
<body>
  <script src="counter.js"></script>
</body>
</html></code>

Erstellen der Vorlage (counter.html – Hinzufügen der Vorlage):

Wir definieren die visuelle Struktur des Zählers mithilfe einer HTML-Vorlage:

<code class="language-html"><template id="x-counter">
  <button id="min-btn">-</button>
  <span id="counter-display">0</span>
  <button id="plus-btn">+</button>
</template></code>

Diese Vorlage wird nicht direkt gerendert; Es dient als Blaupause für unser benutzerdefiniertes Element.

Definieren des benutzerdefinierten Elements (counter.js):

Dieser JavaScript-Code definiert die Funktionalität des Zählers:

<code class="language-javascript">class XCounter extends HTMLElement {
  constructor() {
    super();
    this.counter = 0;
    this.elements = {};
  }

  connectedCallback() {
    const template = document.getElementById("x-counter");
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.elements = {
      plusBtn: this.shadowRoot.querySelector("#plus-btn"),
      minBtn: this.shadowRoot.querySelector("#min-btn"),
      counterDisplay: this.shadowRoot.querySelector("#counter-display")
    };
    this.displayCount();
    this.elements.plusBtn.onclick = () => this.increment();
    this.elements.minBtn.onclick = () => this.decrement();
  }

  increment() {
    this.counter++;
    this.displayCount();
  }

  decrement() {
    this.counter--;
    this.displayCount();
  }

  displayCount() {
    this.elements.counterDisplay.textContent = this.counter;
  }
}

customElements.define("x-counter", XCounter);</code>

Dieser Kurs erweitert HTMLElement. connectedCallback kümmert sich um die Einrichtung, wenn das Element zur Seite hinzugefügt wird, einschließlich des Anhängens des Schatten-DOM und der Ereignis-Listener. increment, decrement und displayCount verwalten den Wert und die Anzeige des Zählers.

Verwenden der Zählerkomponente (counter.html – Hinzufügen des benutzerdefinierten Elements):

Um den Zähler zu verwenden, fügen Sie einfach <x-counter></x-counter> zu Ihrem HTML hinzu.

Stil der Komponente (counter.js – Stile hinzufügen):

Kapseln Sie das Styling innerhalb der Komponente mit adoptedStyleSheets:

<code class="language-javascript">connectedCallback() {
  // ... (previous code) ...
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(this.styles());
  this.shadowRoot.adoptedStyleSheets = [sheet];
  // ... (rest of connectedCallback) ...
}

styles() {
  return `
    :host {
      display: block;
      border: dotted 3px #333;
      width: fit-content;
      height: fit-content;
      padding: 15px;
    }
    button {
      border: solid 1px #333;
      padding: 10px;
      min-width: 35px;
      background: #333;
      color: #fff;
      cursor: pointer;
    }
    button:hover {
      background: #222;
    }
    span {
      display: inline-block;
      padding: 10px;
      width: 50px;
      text-align: center;
    }
  `;
}</code>

Dies fügt grundlegendes Styling hinzu, das im Schatten-DOM enthalten ist.

Fazit:

Dieses Tutorial zeigt die Erstellung einer einfachen, wiederverwendbaren Webkomponente. Die Verwendung von Vorlagen, Schatten-DOM und benutzerdefinierten Elementen fördert die Modularität und Wartbarkeit in der Webentwicklung. Denken Sie daran, [here](https://www.php.cn/link/2eac42424d12436bdd6a5b8a88480cc3) durch den tatsächlichen Link zu Ihrem endgültigen Code zu ersetzen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine einfache Webkomponente von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html Object define for using class Event JS dom this display
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ist die Bibliothek node-onvif noch verwendbar?Nächster Artikel：Ist die Bibliothek node-onvif noch verwendbar?

In Verbindung stehende Artikel

Mehr sehen