HTMLSlotElement.assign() — Methode · JavaScript-Referenz

Signatur

HTMLSlotElement.prototype.assign(...nodes)

Beschreibung

Mit assign() legst du per Skript fest, welche Kindknoten des Shadow-Hosts in einem bestimmten <slot> angezeigt werden. Normalerweise verteilt der Browser die Knoten automatisch über das slot-Attribut der Kinder und das name-Attribut der Slots. Bei der manuellen Slot-Zuweisung übernimmst du diese Aufgabe selbst. Dafür muss der Shadow-Root mit attachShadow({ mode: "open", slotAssignment: "manual" }) erzeugt werden.

Das ist vor allem für Web Components nützlich, die ihre Inhalte dynamisch verteilen wollen, etwa Tabs, Karussells oder Assistenten mit mehreren Schritten. Dort soll immer nur ein bestimmtes Kind sichtbar sein, ohne dass die Nutzer der Komponente slot-Attribute setzen oder das Light DOM verändern müssen.

Jeder Aufruf ersetzt die bisherige manuelle Zuweisung des Slots komplett. Die Reihenfolge der Argumente bestimmt die Reihenfolge der Darstellung. Ein Knoten kann immer nur einem Slot gleichzeitig zugewiesen sein. Weist du ihn einem anderen Slot zu, wird er aus dem vorherigen entfernt. Nur direkte Kinder des Shadow-Hosts werden tatsächlich dargestellt. Andere Knoten werden zwar gespeichert, erscheinen aber nicht in assignedNodes(). Ändert sich die Zuweisung, löst der Slot das Ereignis slotchange aus.

Parameter

Name	Typ	Default	Beschreibung
$...nodes	Element \| Text		Beliebig viele Element- oder Textknoten, die dem Slot in genau dieser Reihenfolge zugewiesen werden. Ohne Argumente wird die manuelle Zuweisung geleert. Doppelt übergebene Knoten zählen nur einmal.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die aktuelle Zuweisung liest du mit assignedNodes() oder assignedElements() aus.

Beispiele

Grundlegende manuelle Zuweisung

const host = document.createElement('div');
host.innerHTML = '<p>Erster</p><p>Zweiter</p>';
document.body.append(host);

// Manuelle Slot-Zuweisung aktivieren
const shadow = host.attachShadow({ mode: 'open', slotAssignment: 'manual' });
const slot = document.createElement('slot');
shadow.append(slot);

const [first, second] = host.children;
slot.assign(second, first); // Reihenfolge der Argumente zählt

console.log(slot.assignedElements().map(el => el.textContent));

["Zweiter", "Erster"]

Tab-Komponente: immer nur ein Panel anzeigen

class SimpleTabs extends HTMLElement {
  #slot;
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
    shadow.innerHTML = '<nav></nav><slot></slot>';
    this.#slot = shadow.querySelector('slot');
  }
  connectedCallback() {
    const nav = this.shadowRoot.querySelector('nav');
    [...this.children].forEach((panel, i) => {
      const btn = document.createElement('button');
      btn.textContent = panel.dataset.title ?? `Tab ${i + 1}`;
      btn.addEventListener('click', () => this.show(i));
      nav.append(btn);
    });
    this.show(0);
  }
  show(index) {
    const panel = this.children[index];
    if (panel) this.#slot.assign(panel); // ersetzt die vorherige Zuweisung
  }
}
customElements.define('simple-tabs', SimpleTabs);

// HTML:
// <simple-tabs>
//   <section data-title="Info">Allgemeines</section>
//   <section data-title="Details">Technische Daten</section>
// </simple-tabs>

Knoten zwischen zwei Slots verschieben und slotchange beobachten

const host = document.createElement('div');
host.innerHTML = '<span>A</span><span>B</span>';
document.body.append(host);

const shadow = host.attachShadow({ mode: 'open', slotAssignment: 'manual' });
shadow.innerHTML = '<slot id="links"></slot> | <slot id="rechts"></slot>';
const links = shadow.getElementById('links');
const rechts = shadow.getElementById('rechts');

rechts.addEventListener('slotchange', () => {
  console.log('rechts:', rechts.assignedNodes().length);
});

const [a, b] = host.children;
links.assign(a, b);
rechts.assign(b); // b wird automatisch aus "links" entfernt

console.log('links:', links.assignedNodes().length);

links.assign(); // manuelle Zuweisung leeren
console.log('links nach Leeren:', links.assignedNodes().length);

links: 1 links nach Leeren: 0 rechts: 1

// Wichtig · Fallstricke

Nur im manuellen Modus wirksam: Wurde der Shadow-Root mit slotAssignment: "named" (Standard) erzeugt, wirft assign() keinen Fehler, hat aber keine sichtbare Wirkung. Der Modus lässt sich nachträglich nicht ändern.
Im manuellen Modus werden das name-Attribut der Slots und das slot-Attribut der Kinder ignoriert. Nicht zugewiesene Kinder erscheinen nirgends, auch nicht im Standard-Slot.
Nur direkte Kinder des Shadow-Hosts werden dargestellt. Andere Knoten bleiben intern gespeichert und werden erst wirksam, wenn sie Kinder des Hosts werden.
Jeder Aufruf ersetzt die vorherige Zuweisung. Wenn du Knoten ergänzen willst, übergib die bestehenden mit, z. B. slot.assign(...slot.assignedNodes(), neu).
slotchange wird asynchron ausgelöst (als Mikrotask) und nicht direkt beim Aufruf.
Kompatibilität: Chrome/Edge ab 86, Firefox ab 92, Safari ab 16.4. Zur Funktionserkennung eignet sich 'assign' in HTMLSlotElement.prototype.

Siehe auch

HTMLSelectElement.add() HTMLSlotElement.assignedNodes() HTMLSlotElement.assignedElements() HTMLDialogElement.show() HTMLElement.click()