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 von sowohl den Knoten zurück, die diesem Slot zugewiesen sind, als auch von den Knoten, die jedem anderen Slot zugewiesen sind, der ein Nachkomme 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 Kindes-<slot>-Elemente zurückgegeben werden sollen (true) oder nicht (false). Standardmäßig false.

Rückgabewert

Ein Array von Knoten.

Beispiele

Der folgende Ausschnitt ist von unserem Slotchange-Beispiel entnommen (Live-Demo 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 zum zweiten Slot in der Vorlage hinzu – welcher derjenige ist, dessen Inhalt im Beispiel immer wieder geändert wird.

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

Spezifikationen

Specification
HTML
# dom-slot-assignednodes-dev

Browser-Kompatibilität