JavaScript Element assignedSlot Property

What You’ll Learn

Element.assignedSlot is a read-only instance property that returns the HTMLSlotElement an element is inserted into. Learn how Shadow DOM slots work, when the value is null, and how to inspect assignment from JavaScript—with five examples and try-it labs.

Introduction

Custom elements often use slots as placeholders inside a shadow tree. Light-DOM children with a matching slot attribute appear in those placeholders when the page renders.

From a slotted child, assignedSlot answers: “Which <slot> am I assigned to?” That is useful for debugging layouts and building slot-aware components.

const slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.assignedSlot); // HTMLSlotElement (or null)

Understanding the Property

MDN: the assignedSlot property of the Element interface returns an HTMLSlotElement representing the <slot> the node is inserted in.

• Read-only — you inspect assignment; you do not set this property.
• Slottable child — works on light-DOM content assigned into a slot.
• May be null — not slotted, or shadow root is closed.
• Baseline — widely available since January 2020 (MDN).

📝 Syntax

assignedSlot

Value

An HTMLSlotElement instance, or null if the element is not assigned to a slot, or if the associated shadow root was attached with mode: "closed".

📋 MDN Custom Element Example Shape

MDN’s simple-template pattern defines a custom element with a named slot my-text. Light-DOM content uses slot="my-text", then assignedSlot points at that <slot>:

<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

class MyParagraph extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = '<slot name="my-text"></slot>';
  }
}
customElements.define("my-paragraph", MyParagraph);

const slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.assignedSlot); // <slot name="my-text">
console.log(slottedSpan.assignedSlot.name); // "my-text"

Related learning: Shadow DOM, custom elements, and HTMLSlotElement.assignedNodes() (the view from the slot side).

Examples Gallery

Examples follow MDN Element: assignedSlot. Labs use a tiny custom element with an open shadow root so you can inspect the property safely.

class MyParagraph extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = '<slot name="my-text"></slot>';
  }
}
customElements.define("my-paragraph", MyParagraph);

const slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.assignedSlot !== null);
console.log(slottedSpan.assignedSlot.outerHTML);

true
<slot name="my-text"></slot>

const slottedSpan = document.querySelector("my-paragraph span");
const slot = slottedSpan.assignedSlot;
console.log(slot ? slot.name : null); // "my-text"

my-text

const plain = document.createElement("span");
plain.textContent = "Not slotted";
document.body.appendChild(plain);
console.log(plain.assignedSlot); // null

null

class ClosedCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "closed" });
    shadow.innerHTML = '<slot name="title"></slot>';
  }
}
customElements.define("closed-card", ClosedCard);

const child = document.querySelector("closed-card span");
console.log(child.assignedSlot); // null (closed shadow)

null

console.log({
  supported: "assignedSlot" in Element.prototype,
  returns: "HTMLSlotElement or null",
  tip: "Use mode: \"open\" to inspect assignedSlot",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "HTMLSlotElement or null",
  "tip": "Use mode: \"open\" to inspect assignedSlot",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Debugging which named slot a projected child landed in.
• Building slot-aware helpers that style or measure slotted content.
• Teaching Shadow DOM: compare light-DOM children with shadow <slot> nodes.
• Verifying that a host uses an open shadow root during development.
• Pairing with slotchange events when projected content updates.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only — assignment happens via the slot attribute / slotting rules.
• Returns null for closed shadow roots even when content is projected.
• Related: ariaValueText, attributes, EventTarget, JavaScript hub.

💡 Best Practices