`<slot>` HTML-Webkomponenten-Slot-Element

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Das <slot>- HTML Element ist ein Platzhalter innerhalb einer Webkomponente, den Sie mit Ihrem eigenen Markup ausfüllen können, wenn die Komponente verwendet wird. Dies ermöglicht Ihnen das Erstellen separater DOM-Bäume, die zusammen dargestellt werden.

Slots können reinen Text, andere HTML-Elemente oder andere Webkomponenten enthalten. Ein Slot kann auch Standardinhalt enthalten, der angezeigt wird, wenn dem Slot beim Verwenden der Webkomponente kein anderer Inhalt zugewiesen wird.

Attribute

Dieses Element beinhaltet die globalen Attribute.

name

Der Name des Slots. Ein benannter Slot ist ein <slot>-Element mit einem name-Attribut, während ein unbenannter Slot kein name-Attribut hat und der Name standardmäßig der leere String ist.

Wenn eine Shadow-Root benannte Slot-Zuweisung verwendet, werden Top-Level-Kindelemente ihres Hosts in Slots gerendert, die einen passenden Namen in ihrem slot-Attribut haben. Slot-Namen sollten pro Shadow-Root eindeutig sein: wenn Sie zwei Slots mit demselben Namen haben, werden alle Elemente mit einem passenden slot-Attribut im ersten Slot gerendert. Alle Top-Level-Kindelemente, die kein slot-Attribut haben, werden im ersten unbenannten <slot>-Element gerendert, das als Standard-Slot bezeichnet wird. Der name hat keinen Effekt, wenn die Shadow-Root manuelle Slot-Zuweisung verwendet.

Für weitere Informationen siehe shadowrootslotassignment beim <template>-Element und Element.attachShadow().

Beispiele

Grundlegende Verwendung

Dieses HTML zeigt, wie mehrere benannte Slots innerhalb eines <template>-Elements deklariert werden können. Beachten Sie, dass diese Slots nur dann als Slots verwendet werden, wenn das Template innerhalb einer Shadow-Root verwendet wird.

html

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", "Helvetica", "Arial", sans-serif;
    }
    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%;
    }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0;
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    .attributes {
      margin-left: 22px;
      font-size: 90%;
    }
    .attributes p {
      margin-left: 16px;
      font-style: italic;
    }
  </style>
  <details>
    <summary>
      <code class="name">
        &lt;<slot name="element-name">NEED NAME</slot>&gt;
      </code>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>

Hinweis: Sie können dieses vollständige Beispiel in Aktion unter element-details sehen (siehe es live in Aktion). Zusätzlich finden Sie eine Erklärung unter Verwendung von Templates und Slots.

Technische Zusammenfassung

Inhaltskategorien	Fluss-Inhalt, Phrasierungsinhalt
Erlaubter Inhalt	Transparent
Ereignisse	[`slotchange`](/de/docs/Web/API/HTMLSlotElement/slotchange_event)
Tag-Auslassung	Keine, sowohl das Anfangs- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das Phrasierungsinhalt akzeptiert
Implizite ARIA-Rolle	Keine entsprechende Rolle
Erlaubte ARIA-Rollen	Keine `role` erlaubt
DOM-Schnittstelle	[`HTMLSlotElement`](/de/docs/Web/API/HTMLSlotElement)