<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

HTML <template>-Element
HTML slot-Attribut
CSS ::slotted-Pseudoelement
CSS :has-slotted-Pseudoklasse
CSS-Scoping-Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden