<slot>

Das <slot>-Element funktioniert ausschließlich innerhalb des Shadow DOM einer Web Component. Außerhalb des Shadow DOM hat es keine Wirkung. Die Grundidee: Du baust ein Custom Element mit attachShadow(), platzierst darin ein oder mehrere <slot>-Elemente, und der Browser fügt die Kindelemente der Komponente an den richtigen Stellen ein.

• <slot> funktioniert nur innerhalb des Shadow DOM, außerhalb wird es ignoriert
• Der Default Slot (ohne name-Attribut) fängt allen Inhalt auf, der keinem Named Slot zugewiesen ist
• Named Slots werden über das name-Attribut auf dem <slot> definiert und über das slot-Attribut am Kindelement zugewiesen
• Fallback-Content zwischen den <slot>-Tags wird angezeigt, wenn kein Inhalt von außen zugewiesen wird
• Das slotchange-Event feuert, wenn sich die zugewiesenen Knoten eines Slots ändern
• Mehrere Elemente können demselben Named Slot zugewiesen werden, sie werden alle dort eingefügt
• Slots verändern den DOM nicht wirklich: der Browser “projiziert” die Inhalte visuell an die richtige Stelle (sogenanntes “flattened tree”)

<script>
  class SimpleCard extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <div class="card">
          <div class="title">
            <slot name="title">Standard-Titel</slot>
          </div>
          <div class="content">
            <slot>Kein Inhalt vorhanden.</slot>
          </div>
        </div>
      `;
    }
  }
  customElements.define("simple-card", SimpleCard);
</script>

<!-- Verwendung der Komponente -->
<simple-card>
  <span slot="title">Meine Karte</span>
  <p>Das ist der Inhalt, der im
    Default-Slot landet.</p>
</simple-card>

Die Komponente definiert zwei Slots: Einen Named Slot title und einen Default Slot für den restlichen Inhalt. Von außen wird <span slot="title"> dem Named Slot zugewiesen, und der <p> landet im Default Slot, weil er kein slot-Attribut hat.

Die gute Nachricht: Slotted Content behält seine volle semantische Bedeutung. Wenn du ein <h2> oder ein <button> in einen Slot einfügst, bleibt es ein <h2> oder <button>, auch im Shadow DOM. Der Browser erstellt einen sogenannten Flattened Tree, den Screenreader und andere Hilfstechnologien lesen. In diesem Baum sind die projizierten Inhalte an ihrer visuellen Position, behalten aber ihre ursprüngliche Semantik.

• Semantik bleibt erhalten: Slotted Elemente behalten ihre ARIA-Rollen, Labels und andere Accessibility-Attribute
• Screenreader sehen den Flattened Tree: Assistive Technologien navigieren nicht durch den Shadow DOM, sondern durch die zusammengeführte Ansicht
• Fokus-Reihenfolge folgt dem DOM: Die Tab-Reihenfolge richtet sich nach der Position der Elemente im Light DOM (dem DOM außerhalb des Shadow DOM), nicht nach der visuellen Position im Shadow DOM
• Fallback-Content ist accessible: Wenn der Fallback-Content angezeigt wird, ist er genauso für Screenreader zugänglich wie regulärer Inhalt

Achte darauf, dass die Struktur deiner Slots logisch sinnvoll ist. Wenn ein Screenreader durch den Flattened Tree navigiert, sollte die Reihenfolge der Inhalte auch ohne visuelle Darstellung verständlich sein.

<slot> außerhalb des Shadow DOM verwenden: Das ist der häufigste Fehler. Ein <slot> direkt im normalen HTML hat keine Wirkung. Es funktioniert nur innerhalb eines Shadow DOM, das du mit attachShadow() erstellst.

<!-- Falsch: slot ohne Shadow DOM -->
<div>
  <slot name="content">Das funktioniert nicht.</slot>
</div>

<!-- Richtig: slot im Shadow DOM -->
<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <slot name="content">Das funktioniert!</slot>
      `;
    }
  }
  customElements.define("my-component", MyComponent);
</script>

name- und slot-Attribut verwechseln: Das name-Attribut gehört auf das <slot>-Element im Shadow DOM. Das slot-Attribut gehört auf das Kindelement im Light DOM, das in den Slot eingefügt werden soll. Die beiden arbeiten zusammen, sitzen aber an unterschiedlichen Stellen.

<!-- Im Shadow DOM der Komponente: -->
<slot name="header"></slot>

<!-- Bei der Verwendung der Komponente: -->
<my-component>
  <h2 slot="header">Titel</h2>
</my-component>

CSS-Isolation im Shadow DOM vergessen: CSS innerhalb des Shadow DOM ist isoliert: Styles von außen wirken nicht auf Slot-Inhalte im Shadow DOM, und Shadow-DOM-Styles wirken nicht auf die geslotteten Elemente. Du kannst ::slotted() verwenden, um geslottete Elemente von innerhalb des Shadow DOM zu stylen, aber nur für direkte Kinder des Slots.

/* Innerhalb des Shadow DOM: */
/* Funktioniert: direkte Kinder stylen */
::slotted(p) { color: blue; }

/* Funktioniert NICHT: verschachtelte Elemente */
::slotted(p span) { color: red; }

Das slot-Element wird als Teil der Web Components Spezifikation von allen modernen Browsern vollständig unterstützt.

• Chrome

  Komplett

  Volle Unterstützung seit Chrome 53.

• Firefox

  Komplett

  Volle Unterstützung seit Firefox 63.

• Safari

  Komplett

  Volle Unterstützung seit Safari 10.

• Edge

  Komplett

• Opera

  Komplett

Web Components und das slot-Element funktionieren in keinem Email-Client. JavaScript, Shadow DOM und Custom Elements werden in E-Mails nicht unterstützt.

• Apple Mail

  Keine

  Kein Support für Web Components oder Shadow DOM.

• Gmail

  Keine

  Entfernt Custom Elements, script-Tags und slot-Elemente komplett.

• Outlook

  Keine

  Keine Unterstützung für JavaScript oder Web Components.

• Thunderbird

  Keine

  Kein Support für Shadow DOM oder Custom Elements.

• Yahoo Mail

  Keine

  Entfernt alle Web-Component-bezogenen Elemente.