Element.slot — Eigenschaft · JavaScript-Referenz

Signatur

Element.slot

Beschreibung

Die Eigenschaft slot spiegelt das globale HTML-Attribut slot eines Elements wider. Sie legt fest, in welchen benannten <slot name="…"> im Shadow Root des Elternelements (des Shadow Hosts) das Element projiziert wird. Die Eigenschaft ist lesbar und schreibbar: Wer den Wert ändert, ändert auch das Attribut, und der Browser weist das Element sofort einem anderen Slot zu.

Gebraucht wird die Eigenschaft vor allem bei Web Components: Man baut damit Inhalte für Komponenten mit mehreren Einfügestellen dynamisch auf (z. B. Kopfzeile, Inhalt, Fußzeile einer Karte) oder verschiebt Kinder zur Laufzeit zwischen Slots, ohne den DOM-Baum umzubauen.

Wichtig: slot liefert nur den gewünschten Slot-Namen als Zeichenkette, nicht den tatsächlich zugewiesenen Slot. Ist das Attribut nicht gesetzt, ist der Wert ein leerer String – das Element landet dann im Standard-Slot (<slot> ohne name), falls es einen gibt. Das echte HTMLSlotElement erhält man über element.assignedSlot.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: der Name des Ziel-Slots. Wird in einen String umgewandelt und als Attribut `slot` gespeichert.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs slot, oder ein leerer String, wenn das Attribut fehlt.

Beispiele

Slot-Namen auslesen

customElements.define('info-card', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <header><slot name="titel"></slot></header>
      <main><slot></slot></main>`;
  }
});

document.body.innerHTML = `
  <info-card>
    <h2 slot="titel">Hinweis</h2>
    <p>Inhalt im Standard-Slot</p>
  </info-card>`;

const [h2, p] = document.querySelector('info-card').children;
console.log(h2.slot);                  // Name aus dem Attribut
console.log(JSON.stringify(p.slot));   // kein Attribut
console.log(h2.assignedSlot.name);     // tatsächlich zugewiesener Slot

titel "" titel

Inhalte dynamisch einem Slot zuweisen

const card = document.querySelector('info-card');

const footer = document.createElement('small');
footer.textContent = '© 2024';
footer.slot = 'fuss'; // entspricht setAttribute('slot', 'fuss')
card.append(footer);

console.log(footer.getAttribute('slot'));
console.log(footer.assignedSlot); // null, da die Komponente keinen Slot "fuss" hat

fuss null

Element zur Laufzeit in einen anderen Slot verschieben

customElements.define('split-view', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <div class="links"><slot name="links"></slot></div>
      <div class="rechts"><slot name="rechts"></slot></div>`;
  }
});

document.body.innerHTML = `
  <split-view><div id="panel" slot="links">Panel</div></split-view>`;

const panel = document.getElementById('panel');
const rechterSlot = document.querySelector('split-view')
  .shadowRoot.querySelector('slot[name="rechts"]');

rechterSlot.addEventListener('slotchange', () => {
  console.log('Neu im rechten Slot:', rechterSlot.assignedElements().map((el) => el.id));
});

// Seite wechseln, ohne das Element aus dem DOM zu entfernen
panel.slot = panel.slot === 'links' ? 'rechts' : 'links';

Neu im rechten Slot: ["panel"]

// Wichtig · Fallstricke

Nur direkte Kinder eines Shadow Hosts werden in Slots projiziert. Hat ein Enkelelement ein slot-Attribut, bleibt es wirkungslos (außer das Elternelement ist selbst ein Shadow Host).
slot gibt nur den gewünschten Namen zurück. Ob die Zuweisung geklappt hat, zeigt assignedSlot – das liefert null, wenn es keinen passenden Slot gibt oder der Shadow Root im Modus closed läuft.
Die Groß- und Kleinschreibung zählt: slot="Titel" passt nicht zu <slot name="titel">.
Textknoten haben keine Eigenschaft slot. Sie landen immer im Standard-Slot. Wer Text in einen benannten Slot bringen will, muss ihn in ein Element wie <span> einpacken.
Bei slotAssignment: 'manual' in attachShadow() wird das Attribut ignoriert. Die Zuweisung läuft dann über HTMLSlotElement.assign().
Kompatibilität: Chrome 53+, Firefox 63+, Safari 10+, Edge 79+. Der alte Internet Explorer und Edge Legacy unterstützen es nicht.

Siehe auch

Element.assignedSlot HTMLSlotElement HTMLSlotElement.prototype.assignedElements() Element.prototype.attachShadow() ShadowRoot Element.part