Element: slot-Eigenschaft

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.

Die slot-Eigenschaft der Element-Schnittstelle gibt den Namen des Shadow-DOM-Slots zurück, in den das Element eingefügt wird.

Ein Slot ist ein Platzhalter innerhalb einer Web-Komponente, den Benutzer mit ihrem eigenen Markup füllen können (siehe Verwendung von Templates und Slots für weitere Informationen).

Wert

Ein String.

Beispiele

In unserem simple-template Beispiel (live ansehen) erstellen wir ein triviales benutzerdefiniertes Elementbeispiel namens <my-paragraph>, in dem ein Shadow-Root angehängt und dann mit den Inhalten eines Templates, das einen Slot namens my-text enthält, gefüllt wird.

Wenn <my-paragraph> im Dokument verwendet wird, wird der Slot durch ein zu beschlottendes Element gefüllt, indem es innerhalb des Elements mit einem slot-Attribut mit dem Wert my-text eingefügt wird. Hier ist ein solches Beispiel:

html
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

In unserer JavaScript-Datei erhalten wir eine Referenz auf das oben gezeigte <span>, und dann protokollieren wir eine Referenz auf den Namen des entsprechenden <slot>-Elements.

js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'

Spezifikationen

Specification
DOM
# ref-for-dom-element-slot①

Browser-Kompatibilität