HTMLSlotElement: assignedNodes() Methode

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 assignedNodes() Methode des HTMLSlotElement Interfaces gibt eine Sequenz der Knoten zurück, die diesem Slot zugewiesen sind.

Wenn die flatten Option auf true gesetzt ist, gibt sie eine Sequenz sowohl der Knoten zurück, die diesem Slot zugewiesen sind, als auch der Knoten, die jedem anderen Slot zugewiesen sind, der ein Nachfahre dieses Slots ist. Wenn keine zugewiesenen Knoten gefunden werden, gibt sie den Fallback-Inhalt des Slots zurück.

Syntax

js
assignedNodes()
assignedNodes(options)

Parameter

options Optional

Ein Objekt, das Optionen für die zurückzugebenden Knoten festlegt. Die verfügbaren Optionen sind:

flatten

Ein boolescher Wert, der angibt, ob die zugewiesenen Knoten aller verfügbaren Kind-<slot>-Elemente (true) oder nicht (false) zurückgegeben werden sollen. Standard ist false.

Rückgabewert

Ein Array von Knoten.

Beispiele

Der folgende Ausschnitt stammt aus unserem slotchange Beispiel (Live ansehen).

js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

Hier holen wir Referenzen zu allen Slots und fügen dann einen Slotchange-Event-Listener dem zweiten Slot im Template hinzu – was derjenige ist, dessen Inhalt im Beispiel immer wieder geändert wird.

Jedes Mal, wenn das in den Slot eingefügte Element sich ändert, protokollieren wir einen Bericht in der Konsole, der angibt, welcher Slot sich geändert hat und was der neue Knoten innerhalb des Slots ist.

Spezifikationen

Specification
HTML Standard
# dom-slot-assignednodes-dev

Browser-Kompatibilität

BCD tables only load in the browser