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
# dom-slot-assignednodes-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
assignedNodes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support