<slot>: Das Web Component 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 Januar 2020.

Das<slot>HTML Element ist Teil derWeb Components Technologie-Suite und dient als Platzhalter innerhalb eines Web-Components, den Sie mit Ihrem eigenen Markup füllen können. Damit lassen sich separate DOM-Bäume erstellen und zusammen präsentieren.

Attribute

Dieses Element umfasst dieglobalen 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 passendesslot-Attribut hat. Einbenannter Slot ist ein<slot>-Element mit einemname-Attribut. Unbenannte Slots haben standardmäßig den leeren String als Namen. Namen sollten pro Shadow Root einzigartig sein: Wenn Sie zwei Slots mit demselben Namen haben, werden alle Elemente mit einem passendenslot-Attribut dem ersten Slot mit diesem Namen zugewiesen.

Beispiele

html

<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>        &lt;<slot name="element-name">NEED NAME</slot>&gt;      </code>      <span><slot name="description">NEED DESCRIPTION</slot></span>    </summary>    <div>      <h4>Attributes</h4>      <slot name="attributes"><p>None</p></slot>    </div>  </details>  <hr /></template>

Hinweis:Sie können dieses vollständige Beispiel in Aktion unterelement-details sehen (siehe eslive in Aktion). Außerdem finden Sie eine Erklärung unterUsing templates and slots.

Technische Zusammenfassung

Inhaltskategorien	Flussinhalt,Phraseninhalt
Erlaubter Inhalt	Transparent
Ereignisse	[`slotchange`](/de/docs/Web/API/HTMLSlotElement/slotchange_event)
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern	Jedes Element, dasPhraseninhalt 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

HTML<template> Element
HTMLslot Attribut
CSS::slotted Pseudo-Element
CSS:has-slotted Pseudo-Klasse
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

Movatterモバイル変換