JavaScript Academy · Lektion

Templates und Slots

Komponieren Sie Komponenten mit template und slot.

Templates und Slots ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Das template-Element

Das <template>-Element enthält inaktives HTML, das geparst, aber nicht gerendert wird. Sein Inhalt bleibt außerhalb der Seite, bis Sie ihn klonen und einfügen. Dadurch eignet es sich ideal für wiederverwendbares Markup.

Auf Template-Inhalte zugreifen

Die Kindknoten eines Templates befinden sich in seiner Eigenschaft .content, einem DocumentFragment. Skripte, Bilder und Styles darin werden erst ausgeführt oder geladen, wenn sie eingefügt werden.

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

Ein Template klonen

Verwenden Sie importNode oder cloneNode(true), um den Template-Inhalt zu kopieren, und fügen Sie anschließend den Klon ein. Durch Klonen können Sie kostengünstig viele Kopien erzeugen.

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

Templates in Komponenten

Benutzerdefinierte Elemente definieren häufig einmalig ein Template und klonen es für jede Instanz in ihre Shadow Root. Das ist schneller, als jedes Mal einen HTML-String erneut zu parsen.

const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';

class MyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.appendChild(tpl.content.cloneNode(true));
  }
}
customElements.define('my-card', MyCard);

Was ist ein Slot

Ein <slot> ist ein Platzhalter innerhalb eines Shadow-Baums, in den der eigene untergeordnete Inhalt des Elements, sein light DOM, projiziert wird. So können Nutzer benutzerdefinierte Inhalte an Ihre Komponente übergeben.

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

Standardinhalt eines Slots

Inhalt zwischen den <slot>-Tags dient als Fallback. Er wird nur angezeigt, wenn der Nutzer keinen passenden Inhalt bereitstellt.

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

Benannte Slots

Mehrere Slots können mithilfe des Attributs name nebeneinander bestehen. Kinder im Light DOM werden mit dem Attribut slot einem Slot zugewiesen.

// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>

// Usage:
// <my-card>
//   <h2 slot="title">Hello</h2>
//   <p slot="body">World</p>
// </my-card>

Der Standard-Slot ohne Namen

Ein Slot ohne name ist der Standard-Slot. Jedes Kind ohne slot-Attribut wird dorthin projiziert. Sie können einen Standard-Slot mit mehreren benannten Slots kombinieren.

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

Projizierte Inhalte gestalten

Verwenden Sie das Pseudoelement ::slotted(), um projizierte Kinder innerhalb der Shadow-Styles zu gestalten. Es findet nur projizierte Knoten der obersten Ebene.

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

Das slotchange-Event

Ein Slot löst ein slotchange-Event aus, wenn sich seine zugewiesenen Knoten ändern. Lauschen Sie darauf, um zu reagieren, wenn Nutzer projizierte Inhalte hinzufügen oder entfernen.

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

Templates und Slots gemeinsam verwenden

Templates definieren die Struktur einmalig; Slots machen diese Struktur flexibel, indem sie Nutzern ermöglichen, eigene Inhalte einzufügen. Zusammen bilden sie die Grundlage für saubere, wiederverwendbare und anpassbare Web Components.

Kurzer Test

Testen Sie Ihr Verständnis von Templates und Slots.

Zusammenfassung

Sie haben Templates und Slots kennengelernt:

<template> enthält inaktives, wiederverwendbares Markup in .content.
Klonen Sie mit cloneNode(true), bevor Sie den Inhalt einfügen.
<slot> projiziert das Light DOM in den Shadow-Baum.
Benannte Slots verwenden name zusammen mit dem slot-Attribut des Kindes.
::slotted() gestaltet projizierte Knoten; slotchange reagiert auf Aktualisierungen.

Sie haben Web Components abgeschlossen. Als Nächstes folgt die Intersection Observer API.

Häufig gestellte Fragen

Ist die Lektion „Templates und Slots“ kostenlos?

Ja — der vollständige Text von „Templates und Slots“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Templates und Slots“?

Komponieren Sie Komponenten mit template und slot. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Templates und Slots“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy