HTMLTemplateElement.shadowRootSlotAssignment — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTemplateElement.shadowRootSlotAssignment

Beschreibung

Die Eigenschaft shadowRootSlotAssignment spiegelt das HTML-Attribut shadowrootslotassignment eines <template>-Elements wider. Sie wirkt nur bei deklarativem Shadow DOM, also bei Templates mit gesetztem shadowrootmode. Wird ein solches Template geparst, legt der Parser beim Elternelement eine Shadow Root an und übernimmt dabei den angegebenen Slot-Zuweisungsmodus.

Es gibt zwei Werte:

"named" (Standard): Kindknoten des Hosts landen automatisch im passenden <slot>, entweder über das Attribut slot="…" oder im Standard-Slot ohne Namen.
"manual": Der Browser weist nichts automatisch zu. Knoten müssen per Skript mit HTMLSlotElement.assign() in einen Slot gesetzt werden.

Das entspricht der Option slotAssignment von Element.attachShadow(), nur eben für den deklarativen Weg. Den manuellen Modus braucht man, wenn eine Komponente selbst per Logik entscheiden will, welche Kinder wo angezeigt werden, etwa bei Tabs, Karussells oder gefilterten Listen, ohne dafür slot-Attribute im Light DOM zu verlangen.

Bei fehlendem oder ungültigem Attributwert liefert die Eigenschaft "named" (Standardwert für fehlende und ungültige Werte). Ein Schreibzugriff setzt das Attribut shadowrootslotassignment auf den neuen Wert.

Parameter

Name	Typ	Default	Beschreibung
$value	"named" \| "manual"	"named"	Nur beim Schreiben: der neue Zuweisungsmodus. Er wird als Attribut `shadowrootslotassignment` gespeichert. Ungültige Werte werden als Attribut übernommen, beim Lesen kommt dann aber `"named"` zurück.

Rückgabewert

Typ

string

Beschreibung

Entweder "named" oder "manual". Fehlt das Attribut oder ist sein Wert ungültig, ist das Ergebnis "named".

Beispiele

Wert lesen und setzen

const tpl = document.createElement('template');
console.log(tpl.shadowRootSlotAssignment); // Standardwert

tpl.shadowRootSlotAssignment = 'manual';
console.log(tpl.shadowRootSlotAssignment);
console.log(tpl.getAttribute('shadowrootslotassignment'));

tpl.setAttribute('shadowrootslotassignment', 'quatsch');
console.log(tpl.shadowRootSlotAssignment); // ungültig → Standard

named manual manual named

Deklaratives Shadow DOM mit manueller Slot-Zuweisung

// HTML:
// <tab-view id="tabs">
//   <template shadowrootmode="open" shadowrootslotassignment="manual">
//     <slot></slot>
//   </template>
//   <section>Tab 1</section>
//   <section>Tab 2</section>
// </tab-view>

const host = document.getElementById('tabs');
const root = host.shadowRoot;
console.log(root.slotAssignment);

// Nichts wird automatisch angezeigt, erst assign() weist zu
const slot = root.querySelector('slot');
const [first, second] = host.querySelectorAll('section');
slot.assign(second);
console.log(slot.assignedNodes().map((n) => n.textContent));

manual ["Tab 2"]

Template dynamisch erzeugen und mit setHTMLUnsafe() einfügen

const supported = 'shadowRootSlotAssignment' in HTMLTemplateElement.prototype;

const host = document.createElement('div');
host.setHTMLUnsafe(`
  <template shadowrootmode="open" shadowrootslotassignment="manual">
    <slot name="a"></slot>
  </template>
  <span slot="a">Hallo</span>
`);

const slot = host.shadowRoot.querySelector('slot');
// Bei manual wird das slot-Attribut ignoriert
console.log(supported, slot.assignedNodes().length);

true 0

// Wichtig · Fallstricke

Nur beim Parsen wirksam: Der Modus wird übernommen, wenn der HTML-Parser die deklarative Shadow Root anlegt. Wer die Eigenschaft danach ändert, beeinflusst eine bestehende Shadow Root nicht. Nach dem Parsen ist das Template außerdem aus dem DOM entfernt, also nutzt man zum Prüfen host.shadowRoot.slotAssignment.
innerHTML reicht nicht: Über innerHTML eingefügte Templates mit shadowrootmode erzeugen keine Shadow Root. Dafür braucht man Element.setHTMLUnsafe() oder Document.parseHTMLUnsafe(). Wie der Name sagt, bereinigen diese Methoden nichts: Kommt der HTML-Text von Nutzern, droht XSS.
Bei "manual" zählt das slot-Attribut nicht mehr. Ohne assign() bleiben die Kinder unsichtbar. assign() akzeptiert nur direkte Kinder des Hosts.
Kompatibilität: Die Eigenschaft ist neu und wird noch nicht von allen Browsern unterstützt. Vorher prüfen, z. B. mit 'shadowRootSlotAssignment' in HTMLTemplateElement.prototype. Als Rückfall kann man attachShadow({ mode: 'open', slotAssignment: 'manual' }) per Skript aufrufen, das wird deutlich breiter unterstützt.

Siehe auch

HTMLTemplateElement HTMLTemplateElement.shadowRootMode HTMLTemplateElement.shadowRootDelegatesFocus ShadowRoot.slotAssignment HTMLSlotElement.assign() Element.attachShadow() Element.setHTMLUnsafe()