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 January 2020.
Die assignedSlot-Eigenschaft des Element-Interfaces ist schreibgeschützt und gibt ein HTMLSlotElement zurück, das das <slot>-Element darstellt, in dem der Knoten eingefügt ist.
Wert
Eine Instanz von HTMLSlotElement oder null, falls das Element keinem Slot zugewiesen ist oder wenn die zugehörige Shadow-Root mit ihrem mode auf closed gesetzt angehängt wurde (siehe Element.attachShadow für weitere Details).
Beispiele
In unserem simple-template Beispiel (live ansehen) erstellen wir ein triviales benutzerdefiniertes Element-Beispiel namens <my-paragraph>, bei dem eine Shadow-Root angehängt und dann mit den Inhalten einer Vorlage gefüllt wird, die einen Slot namens my-text enthält.
Wenn <my-paragraph> im Dokument verwendet wird, wird der Slot durch ein Slottable-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 zu dem oben gezeigten <span> und protokollieren dann 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 Standard # dom-slotable-assignedslot |
Browser-Kompatibilität
BCD tables only load in the browser