Element: assignedSlot-Eigenschaft

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

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">'