<slot>: Das Web-Komponenten-Slot-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <slot> HTML-Element, Teil der Web Components-Technologiesuite, ist ein Platzhalter in einer Web-Komponente, den Sie mit Ihrem eigenen Markup füllen können. Dies ermöglicht es Ihnen, separate DOM-Bäume zu erstellen und sie gemeinsam darzustellen.

Attribute

Dieses Element enthält die globalen Attribute.

name

Der Name des Slots. Wenn die Komponente, die den Slot enthält, gerendert wird, wird der Slot mit dem Kindelement des benutzerdefinierten Elements gerendert, das ein übereinstimmendes slot-Attribut hat. Ein benannter Slot ist ein <slot>-Element mit einem name-Attribut. Nicht benannte Slots haben als Standardname eine leere Zeichenkette. Namen sollten pro Shadow-Root eindeutig sein: Wenn Sie zwei Slots mit demselben Namen haben, werden alle Elemente mit einem übereinstimmenden slot-Attribut dem ersten Slot mit diesem Namen zugeordnet.

Beispiele

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 auf element-details sehen (sehen Sie es live laufen). Zusätzlich finden Sie eine Erklärung unter Verwenden von Templates und Slots.

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Phrasierter Inhalt
Erlaubter Inhalt Transparent
Ereignisse [`slotchange`](/de/docs/Web/API/HTMLSlotElement/slotchange_event)
Tag-Auslassung Keine, sowohl der Start- als auch der Endtag sind obligatorisch.
Erlaubte Elternteile Jedes Element, das phrasierte Inhalte akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLSlotElement`](/de/docs/Web/API/HTMLSlotElement)

Spezifikationen

Specification
HTML
# the-slot-element
DOM
# shadow-tree-slots

Browser-Kompatibilität

Siehe auch