HTMLSlotElement.assignedElements() — Methode · JavaScript-Referenz

Signatur

HTMLSlotElement.prototype.assignedElements(options)

Beschreibung

Mit assignedElements() fragst du ab, welche Elemente aus dem Light DOM (also die Kinder des Host-Elements) in einem bestimmten <slot> einer Web Component dargestellt werden. Anders als assignedNodes() liefert die Methode nur Elementknoten – Textknoten mit Leerraum, Zeilenumbrüchen oder Kommentare fallen weg. Das macht sie zur praktischeren Wahl, wenn du mit den eingefügten Elementen weiterarbeiten willst, etwa um Attribute zu setzen, Klassen zu vergeben oder Inhalte zu zählen.

Standardmäßig werden nur die direkt zugewiesenen Elemente zurückgegeben. Ist dem Slot nichts zugewiesen, erhältst du ein leeres Array – der Fallback-Inhalt des Slots wird dann nicht mitgeliefert. Mit der Option { flatten: true } ändert sich das: Verschachtelte Slots (ein Slot, der selbst in einen Slot einer äußeren Komponente eingefügt wird) werden rekursiv aufgelöst, und falls keine Elemente zugewiesen sind, wird der Fallback-Inhalt des Slots zurückgegeben.

Typischerweise kombinierst du die Methode mit dem Event slotchange, das feuert, sobald sich die Zuweisung eines Slots ändert. So kann eine Komponente auf neu eingefügte oder entfernte Kinder reagieren, ohne einen MutationObserver auf das Host-Element setzen zu müssen.

Parameter

Name	Typ	Default	Beschreibung
$options	Object	{}	Optionales Konfigurationsobjekt.
$options.flatten	boolean	false	Bei `true` werden verschachtelte `<slot>`-Elemente rekursiv durch ihre zugewiesenen Elemente ersetzt; ist nichts zugewiesen, wird der Fallback-Inhalt (nur Elemente) zurückgegeben.

Rückgabewert

Typ

Element[]

Beschreibung

Ein neues Array mit den zugewiesenen Elementen in Dokumentreihenfolge. Leer, wenn keine Elemente zugewiesen sind (und bei flatten: false auch dann, wenn Fallback-Inhalt existiert).

Beispiele

Zugewiesene Elemente eines benannten Slots auslesen

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

document.body.innerHTML = `
  <user-card id="card">
    <span slot="title">Anna Schmidt</span>
    Freitext wird ignoriert
    <p>Entwicklerin</p>
    <p>Berlin</p>
  </user-card>`;

const card = document.getElementById('card');
const defaultSlot = card.shadowRoot.querySelector('slot:not([name])');
const titleSlot = card.shadowRoot.querySelector('slot[name="title"]');

console.log(titleSlot.assignedElements().map(el => el.textContent));
console.log(defaultSlot.assignedElements().length);
console.log(defaultSlot.assignedNodes().length); // inkl. Textknoten

["Anna Schmidt"] 2 7

Auf slotchange reagieren und Tabs durchnummerieren

class TabList extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = '<div role="tablist"><slot></slot></div>';
    const slot = shadow.querySelector('slot');

    slot.addEventListener('slotchange', () => {
      const tabs = slot.assignedElements();
      tabs.forEach((tab, i) => {
        tab.setAttribute('role', 'tab');
        tab.setAttribute('aria-posinset', String(i + 1));
        tab.setAttribute('aria-setsize', String(tabs.length));
      });
      console.log(`${tabs.length} Tabs registriert`);
    });
  }
}
customElements.define('tab-list', TabList);

const list = document.createElement('tab-list');
list.innerHTML = '<button>Start</button><button>Profil</button>';
document.body.append(list);

// Später einen weiteren Tab hinzufügen -> slotchange feuert erneut
setTimeout(() => list.append(Object.assign(document.createElement('button'), { textContent: 'Einstellungen' })), 100);

2 Tabs registriert 3 Tabs registriert

Fallback-Inhalt mit flatten: true ermitteln

const host = document.createElement('div');
document.body.append(host);
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = '<slot><em>Standard-Icon</em></slot>';
const slot = shadow.querySelector('slot');

// Host hat keine Kinder -> nichts zugewiesen
console.log(slot.assignedElements());
console.log(slot.assignedElements({ flatten: true }).map(el => el.outerHTML));

[] ["<em>Standard-Icon</em>"]

// Wichtig · Fallstricke

Fallback-Inhalt: Ohne { flatten: true } gibt die Methode ein leeres Array zurück, auch wenn der Slot sichtbaren Fallback-Inhalt anzeigt – ein häufiger Grund für „leere“ Ergebnisse.
Zeitpunkt: Im constructor einer Custom Element-Klasse sind die Kinder bei Parser-Upgrades oft noch nicht vorhanden. Verlasse dich auf das Event slotchange statt auf einen einmaligen Aufruf.
Nur direkte Kinder: Zugewiesen werden ausschließlich direkte Kinder des Host-Elements; tiefer verschachtelte Nachfahren erscheinen nicht. Deren Unterbäume erreichst du über die zurückgegebenen Elemente.
Kein Live-Array: Das Ergebnis ist eine Momentaufnahme und aktualisiert sich nicht automatisch.
Bei slotAssignment: 'manual' (siehe attachShadow()) liefert die Methode die per slot.assign() zugewiesenen Elemente.
Kompatibilität: Unterstützt in Chrome/Edge 65+, Firefox 66+, Safari 12.1+. Im Internet Explorer nicht verfügbar; ältere Browser nur mit Web-Components-Polyfill.

Siehe auch

HTMLSlotElement.assignedNodes() HTMLSlotElement.assign() HTMLEmbedElement.getSVGDocument() HTMLInputElement.select() HTMLObjectElement.getSVGDocument()