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 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:

html
<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.

js
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