Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes below:

HTMLSlotElement: assignedNodes() method - Web APIs

assignedNodes()
assignedNodes(options)

options Optional

An object that sets options for the nodes to be returned. The available options are:

flatten

A boolean value indicating whether to return the assigned nodes of any available child <slot> elements (true) or not (false). Defaults to false.

An array of nodes.

The following snippet is taken from our slotchange example (See it live).

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}".`,
  );
});

Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.

Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.

Loading…

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.5