JavaScript Element slot Property

What You’ll Learn

Element.slot is an instance property that reflects the HTML slot attribute. It returns the name of the shadow DOM slot the element is assigned to—or an empty string when no named slot is set. Learn reading, writing, and pairing it with <slot> in web components—with five examples and try-it labs.

Introduction

Web components often use slots as placeholders inside a shadow tree. Page authors fill those placeholders by placing light-DOM children into the host and giving them a slot attribute that matches a named <slot>.

element.slot is the JavaScript view of that attribute: it tells you which named slot the element targets, and you can change it at runtime.

const el = document.createElement("span");
el.slot = "my-text";
console.log(el.slot); // "my-text"

Understanding the Property

MDN: the slot property of the Element interface returns the name of the shadow DOM slot the element is inserted in. A slot is a placeholder inside a web component that users can fill with their own markup.

• String value — the named slot, or "" when unset.
• Reflects the attribute — el.slot and slot="..." stay in sync.
• Read and write — you can get or set the name from JavaScript.
• Pairs with <slot> — useful for custom elements and templates.

📝 Syntax

element.slot
element.slot = "slot-name"

Value

A string: the name of the assigned shadow DOM slot, or an empty string when the element is not assigned to a named slot.

📋 Named Slot Pattern

MDN’s core idea: put a named <slot> in the shadow tree, then assign light-DOM children with a matching slot name. Reading element.slot returns that name.

// Light DOM child targeting a named slot
const span = document.createElement("span");
span.slot = "my-text";
span.textContent = "Let's have some different text!";

// Later:
console.log(span.slot); // "my-text"

Related learning: shadowRoot, part, and HTML <slot> / HTMLSlotElement.

Examples Gallery

Examples follow MDN Element: slot and show reading, writing, and using named slots with a simple host.

const span = document.querySelector("[slot='my-text']");
console.log(span.slot); // "my-text"

my-text

const el = document.createElement("span");
console.log(el.slot);      // ""
console.log(el.slot === ""); // true

true

const el = document.createElement("span");
el.slot = "title";
console.log(el.getAttribute("slot")); // "title"
el.slot = "";
console.log(el.slot); // ""

title

const host = document.createElement("div");
host.attachShadow({ mode: "open" });
host.shadowRoot.innerHTML = "";

const span = document.createElement("span");
span.slot = "my-text";
span.textContent = "Let's have some different text!";
host.appendChild(span);

console.log(span.slot); // "my-text"

my-text

console.log({
  supported: "slot" in Element.prototype,
  returns: "string (slot name or \"\")",
  tip: "Reflects the HTML slot attribute",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "string (slot name or \"\")",
  "tip": "Reflects the HTML slot attribute",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Checking which named slot a light-DOM child targets.
• Assigning slot names when building component content in JavaScript.
• Moving content between named slots by changing element.slot.
• Debugging why projected content does not appear in a <slot>.
• Pairing with shadowRoot and part in custom elements.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Returns a string—never a ShadowRoot or HTMLSlotElement.
• Empty string means no named slot assignment (default-slot path).
• Related: shadowRoot, tagName, part, JavaScript hub.

💡 Best Practices