Element: assignedSlot-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 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
| Specification |
|---|
| DOM # dom-slotable-assignedslot |
Browser-Kompatibilität
Loading…