`<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.

Das <slot>-Element HTML ist ein Platzhalter innerhalb einer Webkomponente, den Sie mit Ihrem eigenen Markup füllen können, wenn die Komponente verwendet wird. Dies ermöglicht es Ihnen, separate DOM-Bäume zu erstellen und zusammen darzustellen.

Slots können Klartext, andere HTML-Elemente oder andere Webkomponenten enthalten. Ein Slot kann auch Standardinhalt beinhalten, 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 ein leerer String ist.

Wenn ein Shadow-Root named slot assignment verwendet, werden die Top-Level-Kindelemente seines Hosts in Slots gerendert, die einen übereinstimmenden Namen im slot-Attribut haben. Slot-Namen sollten pro Shadow-Root eindeutig sein: Wenn Sie zwei Slots mit demselben Namen haben, werden alle Elemente mit einem übereinstimmenden slot-Attribut im ersten Slot gerendert. Alle Top-Level-Kindelemente, die kein slot-Attribut haben, werden im ersten unbenannten <slot>-Element gerendert, das als Standardslot bezeichnet wird. Der name hat keinen Effekt, wenn das Shadow-Root manual slot assignment verwendet.

Weitere Informationen finden Sie unter shadowrootslotassignment auf dem <template>-Element und Element.attachShadow().

Beispiele

Grundlegende Verwendung

Dieses HTML zeigt, wie eine Anzahl benannter Slots innerhalb eines <template>-Elements deklariert werden könnten. Beachten Sie, dass diese Slots nur als Slots verwendet werden, wenn das Template innerhalb eines Shadow-Roots 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 ausgeführt). Zusätzlich finden Sie eine Erklärung unter Verwendung von Templates und Slots.

Technische Zusammenfassung

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