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 des Element-Interfaces
gibt den Namen des Shadow DOM-Slots zurück, in den das Element eingefügt ist.
Ein Slot ist ein Platzhalter innerhalb eines Web-Komponenten, den Benutzer mit eigenem Markup füllen können (siehe Verwendung von Vorlagen und Slots für weitere Informationen).
Wert
Ein String.
Beispiele
In unserem simple-template Beispiel (siehe es live), erstellen wir ein triviales benutzerdefiniertes Elementbeispiel namens
<my-paragraph>, in dem ein Shadow-Root angehängt und dann
mit dem Inhalt einer Vorlage gefüllt wird, die einen Slot mit dem Namen my-text enthält.
Wenn <my-paragraph> im Dokument verwendet wird, wird der Slot
durch ein einbettbares 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:
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
In unserer JavaScript-Datei erhalten wir eine Referenz zum oben gezeigten <span>,
dann protokollieren wir eine Referenz auf den Namen des entsprechenden <slot>-Elements.
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'
Spezifikationen
| Specification |
|---|
| DOM Standard # ref-for-dom-element-slot① |
Browser-Kompatibilität
BCD tables only load in the browser