JavaScript Element slot Property

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

Definition

In JavaScript, the slot property of Element returns the name of the shadow DOM slot the element is inserted in. It reflects the HTML slot attribute (MDN).

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

Syntax

Use el.slot. Start with this line.

JavaScript
el.slot
CallWhat it does
el.slotPrimary signature.

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

Library declarations
JavaScript
el.slot

Parameters

ParameterDescription
Shadow host + slotsRequired. Defines named / default placeholders
Light-DOM childRequired. Content that fills a slot
No slot attrOptional. Goes to the unnamed default slot

Return Value

Return ValueDescription
*The current value of el.slot.

JavaScript Examples

Example 1 — Read slot

MDN-style: log the named slot on a light-DOM child.

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

How It Works

  1. Select the slotted child inside the host.
  2. Read .slot. Returns the name string.
  3. Expect a match for <slot name="my-text"> in the shadow.
  4. Empty string means no named slot attribute.

Example 2 — Get and Set

Change which named slot a child targets from script.

JavaScript
const el = document.getElementById("child");
console.log(el.slot); // "my-text"
el.slot = "title";
console.log(el.slot); // "title"
Try It Yourself

How It Works

  1. Log the start name. Matches the HTML attribute.
  2. Assign a new string. Updates the reflected slot attribute.
  3. Projection updates to the matching <slot name>.
  4. Misspelled names will not fill any named slot.

Example 3 — Clear for the Default Slot

Remove the named slot so the child can fill the unnamed default slot.

JavaScript
const el = document.getElementById("child");
el.removeAttribute("slot");
console.log(el.slot); // ""
console.log(el.getAttribute("slot")); // null
Try It Yourself

How It Works

  1. Remove the attribute (or set el.slot = "").
  2. Empty slot means not targeting a named slot (MDN).
  3. Default unnamed <slot> can receive that child.
  4. Named slots stay empty unless another child claims them.
Compatibility

Browser Support

Element.slot is Baseline Widely available (MDN: across browsers since January 2020). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.slot

Reflects the HTML slot attribute as the name of the shadow DOM slot this element targets.

Baseline Widely available
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
slot Baseline

Bottom line: Safe for modern web components. Match light-DOM slot names to shadowvalues; use assignedSlot for the element.

Frequently Asked Questions

It returns the name of the shadow DOM slot the element is inserted in. It reflects the HTML slot attribute as a string (MDN).
No. MDN marks Element.slot as Baseline Widely available (since January 2020). It is not Deprecated, Experimental, or Non-standard.
An empty string means the element has no named slot attribute — it may still fill the default unnamed <slot> if one exists (MDN).
No. You can read and write element.slot. Setting it updates the matching slot attribute.
Inside a shadow tree you place <slot name="my-text">. Light-DOM children with slot="my-text" fill that named slot. element.slot then returns "my-text".
No. Element.slot is a string on slotted content. <slot> elements are HTMLSlotElement instances inside the shadow tree. Use assignedSlot to get the <slot> element.

Next: tagName

Learn the Element property that returns the element’s tag name string.

tagName 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)

10 people found this page helpful

JavaScript Element shadowRoot Property JavaScript Element tagName Property