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