HTMLSlotElement.assignedNodes() — Methode · JavaScript-Referenz

Signatur

HTMLSlotElement.prototype.assignedNodes(options)

Beschreibung

Mit assignedNodes() ermittelt eine Web Component, welche Knoten aus dem Light DOM (also die Kinder des Host-Elements) in einen bestimmten <slot> ihres Shadow DOM eingefügt („projiziert“) werden. Anders als bei assignedElements() enthält das Ergebnis alle Knotentypen, also auch Textknoten und Kommentare. Dazu gehören auch die Leerraum-Textknoten zwischen den Tags.

Standardmäßig liefert die Methode nur die tatsächlich zugewiesenen Knoten. Ist keinem Slot etwas zugewiesen, kommt ein leeres Array zurück. Mit der Option { flatten: true } werden verschachtelte Slots rekursiv aufgelöst: Ist einem Slot seinerseits ein <slot> einer äußeren Komponente zugewiesen, erscheinen dessen zugewiesene Knoten. Ist nichts zugewiesen, wird der Fallback-Inhalt des Slots (seine eigenen Kinder) zurückgegeben.

Typische Einsatzfälle sind das Auslesen von Slot-Inhalten, um darauf zu reagieren (etwa Beschriftungen zählen oder Tabs aufbauen), das Prüfen, ob ein Slot leer ist, und die Kombination mit dem Event slotchange. Das Event feuert, sobald sich die Zuweisung ändert.

Parameter

Name	Typ	Default	Beschreibung
$options	Object	{}	Optionales Konfigurationsobjekt.
$options.flatten	boolean	false	Bei `true` werden verschachtelte `<slot>`-Elemente rekursiv aufgelöst. Ist nichts zugewiesen, wird der Fallback-Inhalt zurückgegeben.

Rückgabewert

Typ

Node[]

Beschreibung

Ein Array der zugewiesenen Node-Objekte (Elemente, Textknoten usw.) in Dokumentreihenfolge. Ist nichts zugewiesen und flatten nicht gesetzt, ist das Array leer.

Beispiele

Zugewiesene Knoten eines benannten Slots auslesen

class InfoKarte extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <h2><slot name="titel">Ohne Titel</slot></h2>
      <slot></slot>
    `;
  }
}
customElements.define('info-karte', InfoKarte);

const karte = document.createElement('info-karte');
karte.innerHTML = '<span slot="titel">Hallo</span> Text im Standard-Slot';
document.body.append(karte);

const titelSlot = karte.shadowRoot.querySelector('slot[name="titel"]');
console.log(titelSlot.assignedNodes().map((n) => n.nodeName));

const standardSlot = karte.shadowRoot.querySelector('slot:not([name])');
console.log(standardSlot.assignedNodes().map((n) => n.nodeName));

["SPAN"] ["#text", "#text"]

Fallback-Inhalt mit flatten ermitteln

const leer = document.createElement('info-karte');
document.body.append(leer);

const slot = leer.shadowRoot.querySelector('slot[name="titel"]');
console.log(slot.assignedNodes().length);
console.log(slot.assignedNodes({ flatten: true }).map((n) => n.textContent));

0 ["Ohne Titel"]

Auf Änderungen reagieren mit slotchange

class TagListe extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = '<p>Anzahl: <span id="n">0</span></p><slot></slot>';
    const slot = shadow.querySelector('slot');
    slot.addEventListener('slotchange', () => {
      // Leerraum-Textknoten herausfiltern
      const inhalt = slot.assignedNodes().filter(
        (n) => n.nodeType === Node.ELEMENT_NODE || n.textContent.trim() !== ''
      );
      shadow.getElementById('n').textContent = inhalt.length;
    });
  }
}
customElements.define('tag-liste', TagListe);

const liste = document.createElement('tag-liste');
liste.innerHTML = '<b>JS</b> <b>CSS</b> <b>HTML</b>';
document.body.append(liste);

Anzeige im Shadow DOM: "Anzahl: 3"

// Wichtig · Fallstricke

Leerraum-Textknoten: Zeilenumbrüche und Leerzeichen zwischen den Kindern des Host-Elements landen als #text-Knoten im Standard-Slot. Filtere sie heraus oder verwende assignedElements(), wenn du nur Elemente brauchst.
Fallback-Inhalt gibt es nur mit { flatten: true }. Ohne diese Option liefert ein leerer Slot immer [], auch wenn er sichtbaren Fallback-Text anzeigt.
Zeitpunkt: Die Zuweisung erfolgt asynchron. Rufst du die Methode direkt im Konstruktor auf, ist das Ergebnis oft noch leer. Warte besser auf das Event slotchange.
Das Ergebnis ist ein gewöhnliches Array ohne Live-Bindung. Es aktualisiert sich nicht automatisch.
Bei manueller Slot-Zuweisung (slotAssignment: 'manual' in attachShadow()) spiegelt die Methode die per slot.assign() gesetzten Knoten wider.
Kompatibilität: wird in allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Der Internet Explorer unterstützt Shadow DOM nicht.

Siehe auch

HTMLSlotElement.assignedElements() HTMLSlotElement.assign() HTMLSelectElement.add() HTMLSelectElement.namedItem() HTMLSelectElement.remove()