Tag <slot>

Tag <slot>

Definition

Status: Aktueller Standard

Das Tag <slot> steht für slot (Steckplatz).

Das <slot>-Tag ist der moderne Nachfolger des veralteten <shadow>-Elements. Es ist ein zentraler Baustein der Web Components und dient als „Platzhalter“ oder „Einschuböffnung“. Ein <slot> wird innerhalb eines Shadow DOM verwendet, um zu bestimmen, an welcher Stelle der „normale“ Inhalt (Light DOM) eines benutzerdefinierten Elements angezeigt werden soll. Vereinfacht gesagt baut man sich mit JavaScript ein eigenes Tag mit vordefiniertem Aussehen. Der <slot> ist dann der Platzhalter für die Inhalte des Tags. <slot> kann nur Inhalte hervorholen und darstellen die bereits vorhanden sind, aber keine externen Inhalte in den <slot> einbinden. Ein vorgegebener Text zwischen <slot> und </slot> wird als Fallback-Text ausgegeben wenn kein Inhalt zum Einfügen definiert wird. Über das name-Attribut können auch mehrere Inhalte gezielt übergeben werden.

Syntax

<slot></slot>

Attribute bzw. Unterelemente

name

Um mehrere Inhalte gezielt übergeben zu können

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <slot> - Das Aussehen der <info-card> wird in JavaScript erstellt, die Info selbst im <slot> eingefügt...

Der Code:

<info-card>
  Das ist eine wichtige Nachricht!
</info-card>

info-card>
  Hier steht eine <strong>andere</strong> Information.
</info-card>

Ergebnis:

Ergebnis: <slot>-Demo 1
Das Aussehen der <info-card> wird in JavaScript erstellt, die Info selbst im <slot> eingefügt...

Unser neu definiertes Tag <info-card> kann auch über CSS angesprochen werden:
info-card {width: 80%;}

Beispiel <slot> - Das JavaScript zum Beispiel...

Der Code:

<script>
      class InfoCard extends HTMLElement {
        constructor() {
          super();
          // Wir erstellen den Shadow DOM (die isolierte Kapsel)
          const shadow = this.attachShadow({
            mode: 'open'
          });

          // Hier definieren wir das feste Aussehen der Karte
          shadow.innerHTML = `
          <style>
            .card {
              border: 2px solid #007bff;
              border-left: 8px solid #007bff;
              background: #e7f3ff;
              padding: 15px;
              margin: 10px 0;
              border-radius: 4px;
              font-family: sans-serif;
              display: flex;
              align-items: center;
            }
            .icon { margin-right: 15px; font-size: 20px; }
          </style>
          
          <div class="card">
            <span class="icon">ℹ️</span>
            div
              <!-- HIER landet der Text, den du oben reinschreibst -->
              <slot>Standardtext, falls nichts eingegeben wurde</slot>
            </div>
          </div>
        `;
        }
      }
      // Wir sagen dem Browser, wie unser Tag heißt
      customElements.define('info-card', InfoCard);
    </script>