Text.assignedSlot — Eigenschaft · JavaScript-Referenz

Signatur

get Text.assignedSlot

Beschreibung

Die schreibgeschützte Eigenschaft assignedSlot eines Text-Knotens liefert das HTMLSlotElement, in das der Textknoten per Shadow DOM „projiziert“ wird. Sie gehört zum Mixin Slottable, das sowohl Element als auch Text implementieren. Ist der Knoten keinem Slot zugewiesen, ist der Wert null.

Ein Textknoten kann nur Kind eines Shadow Hosts sein, wenn er einem Slot zugewiesen werden soll. Da Textknoten kein slot-Attribut haben, landen sie im Standard-Slot (ein <slot> ohne name). Das gilt auch für Leerraum-Textknoten, z. B. Zeilenumbrüche zwischen Tags. Im manuellen Zuweisungsmodus (slotAssignment: "manual") weist man Textknoten stattdessen gezielt mit HTMLSlotElement.assign() zu.

Die Eigenschaft nützt vor allem beim Schreiben und Debuggen von Web Components. Damit kann man zum Beispiel prüfen, ob reiner Text vom Light DOM überhaupt angezeigt wird, oder vom Inhalt aus zum zugehörigen Slot navigieren. Den umgekehrten Weg geht HTMLSlotElement.assignedNodes().

Rückgabewert

Typ

HTMLSlotElement | null

Beschreibung

Das <slot>-Element, dem der Textknoten zugewiesen ist. null, wenn der Knoten keinem Slot zugewiesen ist, sein Elternelement kein Shadow Host ist oder die Shadow Root im Modus "closed" erstellt wurde.

Beispiele

Textknoten im Standard-Slot ermitteln

const host = document.createElement('div');
const text = document.createTextNode('Hallo Welt');
host.append(text);
document.body.append(host);

const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = '<p><slot></slot></p>';

const slot = shadow.querySelector('slot');
console.log(text.assignedSlot === slot);
console.log(text.assignedSlot.name === '');

true true

Geschlossene Shadow Root und benannter Slot liefern null

// Fall 1: Die Shadow Root ist geschlossen
const closedHost = document.createElement('div');
const t1 = document.createTextNode('geheim');
closedHost.append(t1);
closedHost.attachShadow({ mode: 'closed' }).innerHTML = '<slot></slot>';
console.log(t1.assignedSlot);

// Fall 2: Es gibt nur einen benannten Slot, keinen Standard-Slot
const host = document.createElement('div');
const t2 = document.createTextNode('ohne Slot');
host.append(t2);
host.attachShadow({ mode: 'open' }).innerHTML = '<slot name="titel"></slot>';
console.log(t2.assignedSlot);

null null

Manuelle Slot-Zuweisung mit assign()

const host = document.createElement('div');
const a = document.createTextNode('Erster Text');
const b = document.createTextNode('Zweiter Text');
host.append(a, b);
document.body.append(host);

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

shadow.getElementById('s2').assign(a);

console.log(a.assignedSlot?.id);
console.log(b.assignedSlot);

s2 null

In einer Web Component nicht angezeigten Text finden

class InfoBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).innerHTML =
      '<strong><slot name="titel"></slot></strong>';
  }

  connectedCallback() {
    const verwaist = [...this.childNodes].filter(
      (n) => n.nodeType === Node.TEXT_NODE && n.data.trim() && !n.assignedSlot
    );
    if (verwaist.length) {
      console.warn('Text wird nicht angezeigt:', verwaist.map((n) => n.data.trim()));
    }
  }
}
customElements.define('info-box', InfoBox);

document.body.innerHTML = '<info-box><span slot="titel">Hinweis</span> Loser Text</info-box>';

Text wird nicht angezeigt: ["Loser Text"]

// Wichtig · Fallstricke

Geschlossene Shadow Roots: Wurde die Shadow Root mit mode: "closed" erstellt, gibt assignedSlot immer null zurück, auch wenn der Text tatsächlich angezeigt wird. So wird die Kapselung gewahrt.
Nur der Standard-Slot: Textknoten haben kein slot-Attribut. Ohne einen unbenannten <slot> werden sie im automatischen Modus nie zugewiesen und damit auch nicht dargestellt.
Leerraum zählt mit: Auch Zeilenumbrüche und Leerzeichen zwischen Tags sind Textknoten und werden dem Standard-Slot zugewiesen. Beim Auswerten sollte man data.trim() prüfen.
Nur direkte Kinder: Zugewiesen werden nur direkte Kinder des Shadow Hosts. Ein Textknoten tiefer im Baum (z. B. innerhalb eines <span>) hat den Wert null, auch wenn sein Elternelement einem Slot zugewiesen ist.
Verschachtelte Slots: Die Eigenschaft liefert nur den direkt zugewiesenen Slot. Wird dieser Slot selbst in einen weiteren Slot projiziert, muss man sich über dessen assignedSlot weiterhangeln.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die manuelle Zuweisung (slotAssignment: "manual", assign()) ist neuer: Chrome 86+, Firefox 92+, Safari 16.4+.

Siehe auch

Element.assignedSlot HTMLSlotElement HTMLSlotElement.assignedNodes() HTMLSlotElement.assign() Element.attachShadow() Text