Slot-Elemente zur Inhaltsverteilung
Projizieren Sie Host-Inhalte mit benannten und Standard-Slots in das Shadow DOM
Slot-Elemente zur Inhaltsverteilung ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Light DOM und Shadow DOM
Kinder, die in HTML innerhalb eines Custom Elements geschrieben werden, bilden dessen „Light DOM“ – sie befinden sich nicht im Shadow Tree. Standardmäßig rendert der Browser sie nicht; der Shadow Tree muss sie über <slot> ausdrücklich anfordern.
Der Default-Slot
Ein <slot>-Element innerhalb des Shadow Tree markiert die Stelle, an der die Light-DOM-Kinder erscheinen sollen. Ohne Namen ist es der Default-Slot und akzeptiert jedes direkte Kind des Hosts.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Benannte Slots
Mehrere Slots können über ihren Namen angesprochen werden. Der Shadow Tree deklariert <slot name="header">; der Nutzer verwendet ihn mit <h1 slot="header">. Kinder mit einem passenden slot-Attribut füllen diesen Slot; nicht zugeordnete Kinder fallen in den Default-Slot.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Fallback-Inhalt von Slots
Inhalt zwischen den Slot-Tags wird nur gerendert, wenn diesem Slot nichts zugewiesen ist: <slot>No content provided</slot>. Verwenden Sie ihn, um Platzhalter- oder Anleitungstext für leere Slots anzuzeigen.
Stilvererbung über Slots hinweg
In Slots eingefügte Kinder bleiben im Light DOM und erben Styles aus dem Hauptdokument, nicht aus dem Shadow Tree. Verwenden Sie das Pseudoelement ::slotted() innerhalb des Shadow Tree, um sie zu stylen: ::slotted(p) { color: red; }.
Einschränkungen von ::slotted
::slotted() kann nur direkte Kinder des Hosts ansprechen, also die Elemente, die tatsächlich in den Slot verteilt werden. Ihre Nachfahren können damit nicht angesprochen werden. Für eine tiefere Gestaltung sollten Sie CSS Custom Properties bereitstellen oder stattdessen ::part für Elemente innerhalb des Shadow Tree verwenden.
Änderungen von Slots erkennen
Jeder Slot löst ein slotchange-Event aus, wenn sich seine zugewiesenen Knoten ändern. Hören Sie auf dieses Event, um auf dynamische Inhaltsaktualisierungen zu reagieren: slot.addEventListener("slotchange", handler). Das ist nützlich für Komponenten, deren Layout davon abhängt, welche Kinder vorhanden sind.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes und assignedElements
slot.assignedNodes() gibt alle einem Slot zugewiesenen Knoten zurück, einschließlich Textknoten. slot.assignedElements() gibt nur die Element-Kinder zurück – normalerweise die Variante, die Sie beim programmgesteuerten Durchlaufen von Slot-Inhalten benötigen.
Kinder verteilen
Der Browser übernimmt die gesamte Verteilung automatisch anhand des slot-Attributs jedes Kindes. Es ist kein JavaScript-Schritt erforderlich – schreiben Sie <span slot="footer">...</span> in die Light-DOM-Kinder des Hosts, und der entsprechende Slot im Shadow Tree enthält es.
Slots und das Stylen des Hosts
Die Styles des Hosts selbst, die im Dokument auf <my-card> gesetzt werden, kaskadieren in die Light-DOM-Kinder, einschließlich derjenigen, die in einem Slot landen. CSS aus dem Shadow Tree über ::slotted hat eine höhere Spezifität als geerbte Host-Styles, wenn beide dieselbe Eigenschaft ansprechen.
Häufige Anwendungsfälle
Karten mit Header-, Body- und Footer-Slots, Dialoge mit Slots für Titel, Inhalt und Aktionen, Listenelemente mit Slots für vorangestellte und nachgestellte Inhalte sowie Navigationsmenüs mit Item-Slots. Slots machen Custom Elements genauso zusammensetzbar wie <details>/<summary> oder <table>/<tr>.
Wissenscheck
Was ist der Unterschied zwischen dem Default-Slot und einem benannten Slot?
Zusammenfassung
Slots projizieren Kinder aus dem Light DOM an bestimmte Stellen im Shadow Tree. Der Default-Slot nimmt jedes nicht benannte Kind auf; benannte Slots nehmen Kinder mit passenden slot-Attributen auf. Fallback-Inhalt füllt leere Slots, ::slotted stylt direkte Slot-Kinder, und slotchange-Events reagieren auf dynamische Inhaltsaktualisierungen.
Häufig gestellte Fragen
Ist die Lektion „Slot-Elemente zur Inhaltsverteilung“ kostenlos?
Ja — der vollständige Text von „Slot-Elemente zur Inhaltsverteilung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Slot-Elemente zur Inhaltsverteilung“?
Projizieren Sie Host-Inhalte mit benannten und Standard-Slots in das Shadow DOM Du übst HTML 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 HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML 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 2 von 4.
Wie lange dauert die Lektion „Slot-Elemente zur Inhaltsverteilung“?
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 HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML 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
- attachShadow und Shadow Root
- Slot-Elemente zur Inhaltsverteilung
- Gekapselte Stile im Shadow DOM
- Part und Exportparts für externe Formatierung