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 Januar 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:
<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.
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-element-slot① |