Element.assignedSlot — Eigenschaft · JavaScript-Referenz

Signatur

get Element.assignedSlot

Beschreibung

Die schreibgeschützte Eigenschaft assignedSlot zeigt von einem Element des Light DOM auf den <slot> im Shadow DOM seines Hosts, in dem es tatsächlich angezeigt wird. Damit ist sie das Gegenstück zu HTMLSlotElement.assignedNodes() bzw. assignedElements(). Diese beiden Methoden gehen vom Slot zu den zugewiesenen Inhalten, assignedSlot geht vom Inhalt zum Slot.

Zuweisbar sind nur direkte Kindknoten eines Shadow-Hosts. Bei benannten Slots entscheidet das Attribut slot="name" am Kindelement. Kinder ohne slot-Attribut landen im Standard-Slot (<slot> ohne name). Hat der Shadow Root slotAssignment: "manual", legt stattdessen HTMLSlotElement.assign() die Zuweisung fest.

Typische Anwendungen sind:

herausfinden, in welchem Bereich einer Web Component ein Kind angezeigt wird (z. B. „header“ oder „footer“),
Styling oder Verhalten abhängig vom Slot anpassen,
Debugging von Slot-Zuweisungen.

Dieselbe Eigenschaft gibt es auch auf Text-Knoten (Mixin Slottable). Auch Textinhalte können also ihren Slot abfragen.

Rückgabewert

Typ

HTMLSlotElement | null

Beschreibung

Das <slot>-Element, dem das Element zugewiesen ist. Den Wert null gibt es in drei Fällen: Das Element ist keinem Slot zugewiesen, sein Elternelement ist kein Shadow-Host, oder der Slot liegt in einem geschlossenen Shadow Root (mode: "closed").

Beispiele

Slot eines Kindelements ermitteln

const host = document.createElement('div');
document.body.append(host);

const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = `
  <header><slot name="titel"></slot></header>
  <main><slot></slot></main>
`;

const h2 = document.createElement('h2');
h2.slot = 'titel';
h2.textContent = 'Überschrift';

const p = document.createElement('p');
p.textContent = 'Inhalt';

host.append(h2, p);

console.log(h2.assignedSlot.name);           // benannter Slot
console.log(p.assignedSlot.name === '');     // Standard-Slot
console.log(p.assignedSlot.parentElement.localName);

titel true main

Geschlossener Shadow Root liefert null

const host = document.createElement('div');
const shadow = host.attachShadow({ mode: 'closed' });
shadow.innerHTML = '<slot></slot>';

const span = document.createElement('span');
host.append(span);

// Das Element wird zwar im Slot angezeigt, der Slot bleibt aber verborgen
console.log(span.assignedSlot);

// Nicht direkte Kinder werden nie zugewiesen
const inner = document.createElement('b');
span.append(inner);
console.log(inner.assignedSlot);

null null

Web Component: Kinder nach Slot gruppieren

class InfoCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <slot name="kopf"></slot>
      <slot></slot>
    `;
    this.shadowRoot.addEventListener('slotchange', () => this.#report());
  }

  #report() {
    for (const child of this.children) {
      const slotName = child.assignedSlot?.name || '(Standard)';
      console.log(`${child.localName} → ${slotName}`);
    }
  }
}
customElements.define('info-card', InfoCard);

document.body.insertAdjacentHTML('beforeend', `
  <info-card>
    <h3 slot="kopf">Titel</h3>
    <p>Text</p>
  </info-card>
`);

h3 → kopf p → (Standard)

// Wichtig · Fallstricke

Geschlossene Shadow Roots: Bei mode: "closed" ist der Rückgabewert immer null, damit keine internen Knoten nach außen gelangen. Innerhalb der Komponente nutzt man in diesem Fall die gespeicherte Shadow-Root-Referenz zusammen mit slot.assignedElements().
Nur direkte Kinder: Enkelelemente eines Hosts haben selbst kein assignedSlot. Sie werden nur über ihr Elternelement mit angezeigt.
Zeitpunkt: Die Zuweisung wird zwar synchron berechnet, beim Aufbau über Parser oder Custom Elements existiert der Slot aber eventuell noch nicht. Auf Änderungen reagiert man zuverlässig mit dem Event slotchange.
Verschachtelte Slots: Wird ein <slot> selbst in einen weiteren Slot weitergereicht, liefert assignedSlot nur die erste Ebene. Die vollständige Kette erhält man mit assignedNodes({ flatten: true }) oder durch wiederholtes Abfragen.
Kompatibilität: Unterstützt in Chrome/Edge 53+, Firefox 63+ und Safari 10+. Die manuelle Slot-Zuweisung (slotAssignment: "manual") ist neuer und erst seit etwa 2023 in allen Browsern verfügbar.

Siehe auch

Element.slot Element.ariaLevel Element.ariaModal Element.ariaSetSize Element.ariaSort