JavaScript Element assignedSlot Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ASSIGNEDSLOT

Definition

Element.assignedSlot is a read-only property that returns the HTMLSlotElement (<slot>) the element is inserted into inside a Shadow DOM — or null if it is not assigned (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.assignedSlot. Start with this line.

JavaScript
el.assignedSlot
CallWhat it does
el.assignedSlotPrimary signature.

Built into the browser. Read or assign el.assignedSlot — no import required.

Library declarations
JavaScript
el.assignedSlot

Parameters

ParameterDescription
Host + open shadowRequired. Where <slot> lives
Light-DOM childRequired. The element you call assignedSlot on

Return Value

Return ValueDescription
*HTMLSlotElement or null

JavaScript Examples

Example 1 — Read assignedSlot (MDN)

Log the named slot a light-DOM child was assigned to.

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

How It Works

  1. Find the child. The <span> lives in the light DOM of the host.
  2. Read assignedSlot. Because slot="my-text" matches a named slot, you get an HTMLSlotElement.
  3. Read the name. assignedSlot.name is "my-text".
  4. Needs an open shadow. The host must expose an open shadow root for this to work from page script.

Example 2 — Not Assigned → null

A child with no matching slot name returns null.

JavaScript
const el = document.querySelector("demo-box .orphan");
console.log(el.assignedSlot); // null
console.log(el.slot);         // "missing" (requested name only)
Try It Yourself

How It Works

  1. Request a slot. el.slot is the attribute string "missing".
  2. No match. The shadow tree has no <slot name="missing">.
  3. assignedSlot is null. The node was not distributed into a slot.
  4. Lesson. slot is what you asked for; assignedSlot is what you got.

Example 3 — Closed Shadow → null

MDN: a closed shadow root hides slot assignment from outside script.

JavaScript
const el = document.querySelector("closed-box span");
console.log(el.slot);         // "title"
console.log(el.assignedSlot); // null  (shadow mode is "closed")
Try It Yourself

How It Works

  1. Closed mode. The host called attachShadow({ mode: "closed" }).
  2. Still slotted visually. Distribution can still happen inside the component.
  3. Outside scripts see null. MDN: assignedSlot is null for closed roots.
  4. For debugging. Prefer mode: "open" while learning Shadow DOM.
Compatibility

Browser Support

Element.assignedSlot is Baseline Widely available (MDN: across browsers since January 2020).

✓ Baseline · Widely available

Element.assignedSlot

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no Shadow DOM slot APIs.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.assignedSlot Excellent

Bottom line: Safe for modern web apps. Use an open shadow root when page script needs to inspect assignedSlot.

Frequently Asked Questions

It returns the HTMLSlotElement the element is inserted into inside a Shadow DOM, or null if the element is not assigned to a slot.
No. MDN marks Element.assignedSlot as Baseline Widely available (since January 2020). It is not Deprecated, Experimental, or Non-standard.
No. It is a read-only instance property. You assign content with the HTML slot attribute (or related Slottable APIs), then read assignedSlot.
When the element is not assigned to any slot, or when the associated shadow root was attached with mode: "closed" (MDN).
Place the element as a child of the host and set slot="name" to match a <slot name="name"> in the open shadow tree. Unnamed content goes to the default slot.
element.slot is the reflected slot attribute string (the name you requested). assignedSlot is the actual <slot> element it was assigned to after distribution.

Next: attributes

Learn the attributes property — a live NamedNodeMap of an element’s attributes.

attributes tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

JavaScript Element ariaValueText Property JavaScript Element attributes Property