Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<slot>: Das Slot-Element für Webkomponenten

Baseline Widely available

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

Das <slot> HTML-Element — Teil der Webkomponenten-Technologiesuite — ist ein Platzhalter innerhalb einer Webkomponente, den Sie mit eigenem Markup füllen können. Dadurch lassen sich separate DOM-Bäume erstellen und gemeinsam darstellen.

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 über ein passendes slot-Attribut verfügt. Ein benannter Slot ist ein <slot>-Element mit einem name-Attribut. Nicht benannte Slots tragen den Standardnamen des leeren Strings. Namen sollten innerhalb eines Shadow-Roots eindeutig sein: Wenn Sie zwei Slots mit demselben Namen haben, werden alle Elemente mit einem passenden slot-Attribut dem ersten Slot mit diesem Namen zugewiesen.

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: Dieses vollständige Beispiel können Sie in Aktion sehen unter element-details (sehen Sie es sich live an). Eine Erklärung finden Sie außerdem unter Templates und Slots verwenden.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Textinhalt
Zulässiger Inhalt Transparent
Events [`slotchange`](/de/docs/Web/API/HTMLSlotElement/slotchange_event)
Auslassung des Tags Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Textinhalt akzeptiert
Implizierte 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