<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 des Web Components Technologiepakets – ist ein Platzhalter innerhalb einer Webkomponente, den Sie mit Ihrem eigenen Markup füllen können. Dadurch können Sie separate DOM-Bäume erstellen und diese zusammen präsentieren.

Attribute

Dieses Element umfasst 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 besitzt. Ein benannter Slot ist ein <slot>-Element mit einem name-Attribut. Unbenannte Slots haben standardmäßig den leeren String als Namen. Namen sollten eindeutig pro Shadow-Wurzel 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 sehen unter element-details (siehe es live in Aktion). Zusätzlich finden Sie eine Erklärung unter Using templates and slots.

Technische Zusammenfassung

Inhaltskategorien Fließinhalte, Textauszeichnungsinhalte
Zulässiger 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 Textauszeichnungsinhalte akzeptiert
Implizite ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen Kein role erlaubt
DOM-Schnittstelle [`HTMLSlotElement`](/de/docs/Web/API/HTMLSlotElement)

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch