Element: assignedSlot-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 schreibgeschützte assignedSlot-Eigenschaft der Element-Schnittstelle gibt ein HTMLSlotElement zurück, das das <slot>-Element darstellt, in das der Knoten eingefügt wurde.
Wert
Eine Instanz von HTMLSlotElement oder null, wenn das Element keinem Slot zugewiesen ist oder wenn die zugehörige Schattenwurzel mit ihrem mode auf closed gesetzt angefügt wurde (siehe Element.attachShadow für weitere Details).
Beispiele
In unserem Beispiel eines einfachen Templates (live ansehen) erstellen wir ein triviales benutzerdefiniertes Element namens <my-paragraph>, bei dem eine Schattenwurzel angefügt und dann mit den Inhalten 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 einsatzfä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 holen wir uns eine Referenz zu dem oben gezeigten <span>, dann protokollieren wir eine Referenz zu dem ursprünglichen <slot>-Element, in das das <span> eingefügt wurde.
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'
Spezifikationen
| Spezifikation |
|---|
| DOM # dom-slotable-assignedslot |