HTMLSlotElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSlotElement.name

Beschreibung

Die Eigenschaft name von HTMLSlotElement spiegelt das Attribut name eines <slot>-Elements im Shadow DOM wider. Über diesen Namen wird festgelegt, welche Light-DOM-Kinder eines Custom Elements in diesen Slot projiziert werden: Ein Kind-Element mit slot="titel" landet im Slot mit name="titel".

Ein Slot ohne Namen (leerer String) ist der Standard-Slot. Er nimmt alle Kindknoten auf, die kein slot-Attribut besitzen, darunter auch reine Textknoten.

Wird name zur Laufzeit geändert, ordnet der Browser die Slot-Zuweisung neu zu. Elemente, die bisher in diesem Slot lagen, können dann herausfallen, und andere können neu hinzukommen. Dabei wird das Ereignis slotchange ausgelöst. Das ist praktisch, um den Inhalt einer Komponente dynamisch umzuschalten, zum Beispiel bei Tabs oder Layout-Varianten.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	""	Beim Setzen: der neue Slot-Name. Andere Werte werden in einen String umgewandelt. Ein leerer String macht den Slot zum Standard-Slot.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs name oder "", wenn das Attribut fehlt (Standard-Slot).

Beispiele

Slot-Namen in einer Komponente auslesen

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

const karte = document.createElement('info-karte');
document.body.append(karte);

const slots = karte.shadowRoot.querySelectorAll('slot');
slots.forEach((slot) => console.log(JSON.stringify(slot.name)));

"titel" ""

Slot-Namen dynamisch umschalten (Tabs)

const host = document.createElement('div');
host.innerHTML = `
  <p slot="tab-a">Inhalt A</p>
  <p slot="tab-b">Inhalt B</p>
`;
document.body.append(host);

const shadow = host.attachShadow({ mode: 'open' });
const slot = document.createElement('slot');
slot.name = 'tab-a';
shadow.append(slot);

slot.addEventListener('slotchange', () => {
  const texte = slot.assignedElements().map((el) => el.textContent);
  console.log(`${slot.name}:`, texte);
});

// Später: auf Tab B wechseln
setTimeout(() => {
  slot.name = 'tab-b';
}, 0);

tab-a: ["Inhalt A"] tab-b: ["Inhalt B"]

Im slotchange-Handler erkennen, welcher Slot sich geändert hat

const host = document.querySelector('#profil');
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = '<slot name="avatar"></slot><slot name="bio"></slot>';

shadow.addEventListener('slotchange', (event) => {
  const slot = event.target;
  console.log(`Slot "${slot.name}" hat jetzt ${slot.assignedNodes().length} Knoten`);
});

const bio = document.createElement('p');
bio.slot = 'bio';
bio.textContent = 'Webentwicklerin aus Köln';
host.append(bio);

Slot "bio" hat jetzt 1 Knoten

// Wichtig · Fallstricke

Slot-Namen sind case-sensitiv: slot="Titel" passt nicht zu name="titel".
Wenn mehrere Slots im selben Shadow Root denselben Namen haben, bekommt nur der erste in Baumreihenfolge die Inhalte. Die weiteren bleiben leer und zeigen ihren Fallback-Inhalt an.
Nur direkte Kinder des Host-Elements werden Slots zugewiesen. Ein slot-Attribut an tiefer verschachtelten Elementen wird ignoriert.
Bei attachShadow({ slotAssignment: 'manual' }) spielt name für die Zuweisung keine Rolle. Die Inhalte werden dann über HTMLSlotElement.assign() zugeordnet.
slotchange wird asynchron (als Microtask) ausgelöst und nicht sofort beim Setzen von name.
Kompatibilität: Chrome 53+, Firefox 63+, Safari 10+ und Edge 79+ unterstützen die Eigenschaft. Der Internet Explorer unterstützt sie nicht.

Siehe auch

Element.slot HTMLSelectElement.name HTMLFormElement.name HTMLInputElement.name HTMLMapElement.name