JavaScript Text assignedSlot Property

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

Definition

Text.assignedSlot is a read-only property that returns the HTMLSlotElement (<slot>) a text node is assigned to inside a Shadow DOM — or null if it is not assigned (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use text.assignedSlot. Start with this line.

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

Built into the browser. Read text.assignedSlot on a Text node — no import required.

Library declarations
JavaScript
textNode.assignedSlot

Parameters

ParameterDescription
Host + open shadowRequired. Where <slot> lives

Return Value

Return ValueDescription
*HTMLSlotElement or null

JavaScript Examples

Example 1 — Default Slot Assignment

A direct text child of a host fills the unnamed <slot>.

JavaScript
class CtfTextSlotHost extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = "<slot></slot>";
  }
}
customElements.define("ctf-text-slot-host", CtfTextSlotHost);

const host = document.createElement("ctf-text-slot-host");
const text = new Text("Slotted text");
host.appendChild(text);
document.body.appendChild(host);

const slot = text.assignedSlot;
console.log(slot !== null);                              // true
console.log(slot.localName);                             // "slot"
console.log(slot === host.shadowRoot.querySelector("slot")); // true
Try It Yourself

How It Works

  1. Build a host. The custom element attaches an open shadow root with a default <slot>.
  2. Append text. new Text("Slotted text") becomes a light-DOM child of the host.
  3. Browser assigns. Unnamed light-DOM children go to the unnamed slot.
  4. Read the property. text.assignedSlot is that same <slot> node.

Example 2 — Not Slotted → null

Everyday text outside Shadow DOM slots reports null.

JavaScript
const text = new Text("Hello");
const p = document.createElement("p");
p.appendChild(text);

console.log(text.assignedSlot);           // null
console.log(p.firstChild.assignedSlot);   // null
Try It Yourself

How It Works

  1. Create a text node. new Text("Hello") is a normal DOM text node.
  2. Put it in a paragraph. No custom element and no shadow <slot> are involved.
  3. Read assignedSlot. There is nothing to assign to → null.
  4. Lesson. On most pages, assignedSlot stays null until you use slots.

Example 3 — Named Slot: Element vs Nested Text

The wrapper element is assigned; its child text node usually is not.

JavaScript
class CtfTextNamedHost extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML =
      '<slot name="title"></slot>';
  }
}
customElements.define("ctf-text-named-host", CtfTextNamedHost);

const host = document.createElement("ctf-text-named-host");
const wrap = document.createElement("span");
wrap.slot = "title";
const text = new Text("Title text");
wrap.appendChild(text);
host.appendChild(wrap);
document.body.appendChild(host);

console.log(wrap.assignedSlot.name); // "title"
console.log(text.assignedSlot);      // null
Try It Yourself

How It Works

  1. Named slot in shadow. The host exposes <slot name="title">.
  2. Element carries the name. wrap.slot = "title" matches that slot.
  3. Text is nested. The text lives inside the span, so it is not itself a light-DOM child of the host for slot assignment.
  4. Result. wrap.assignedSlot is the named slot; text.assignedSlot stays null.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Text.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
Text.assignedSlot Excellent

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

Frequently Asked Questions

A read-only HTMLSlotElement for the <slot> that this text node is assigned to in a shadow tree, or null if the text node is not assigned to any slot.
No. MDN marks Text.assignedSlot as Baseline Widely available (since January 2020). It is not Deprecated, Experimental, or Non-standard.
Most of the time: normal DOM text that is not a slotted light-DOM child of a host, text nested inside a slotted element (the element is assigned, not the nested text), or when the associated shadow root is closed.
No. Named slots match the slot attribute on Element nodes. A Text node has no attributes, so it only fills the default (unnamed) slot when it is a direct light-DOM child of the host. For named slots, wrap the text in an element with slot="name".
No. It is read-only. Assignment happens through Shadow DOM distribution (host children + <slot> layout), not by setting assignedSlot.
From the slot side, slot.assignedNodes() lists the nodes distributed into that slot. For a Text node in that list, text.assignedSlot is that same slot element.

Next: wholeText

Learn how adjacent text nodes concatenate into one string without changing the tree.

wholeText 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 Text Constructor JavaScript Text wholeText Property