Element: slot-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die slot-Eigenschaft der Element-Schnittstelle gibt den Namen des Shadow-DOM-Slots zurück, in den das Element eingefügt ist. Sie spiegelt das Inhaltsattribut slot des Elements wider.
Ein Slot ist ein Platzhalter innerhalb einer Web-Komponente, den Benutzer mit ihrem eigenen Markup füllen können (weitere Informationen finden Sie unter Verwenden von Templates und Slots).
Wert
Ein String.
Beispiele
In unserem simple-template-Beispiel (live ansehen) erstellen wir ein einfaches benutzerdefiniertes Element namens
<my-paragraph>, an das ein Shadow Root angehängt und anschließend mit dem Inhalt eines Templates gefüllt wird, das einen Slot namens my-text enthält.
Wenn <my-paragraph> im Dokument verwendet wird, wird der Slot durch ein slotfähiges 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 auf das oben gezeigte <span>
und protokollieren dann eine Referenz auf den Namen des entsprechenden <slot>-Elements.
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'
Spezifikationen
| Spezifikation |
|---|
| DOM # ref-for-dom-element-slot① |