Thename property of theHTMLSlotElementinterface returns or sets the slot name. A slot is a placeholder inside a web componentthat users can fill with their own markup.

Value

A string.

Examples

The following snippet is taken from ourslotchange 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 the2nd slot in the template — which is the one that keeps having its contents changed inthe example.

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

Specifications

Browser compatibility