JavaScript Text assignedSlot Property

Beginner
⏱️ 12 min read
📚 Updated: Jul 2026
🎯 5 Examples
🚀 5 Try-it labs
Baseline Widely available
Instance property
JavaScript Text.assignedSlot property tutorial — HTMLSlotElement for slotted text nodes
Overview

What You’ll Learn

Text.assignedSlot is a read-only instance property that tells you which Shadow DOM <slot> (if any) a text node is assigned to. Learn when it returns an HTMLSlotElement, when it is null, and how that pairs with slot.assignedNodes()—with five examples and try-it labs.

01

Kind

Read-only property

02

Returns

HTMLSlotElement | null

03

Topic

Shadow DOM slots

04

Default

Usually null

05

API family

Slottable

06

Status

Baseline widely

Fundamentals

Introduction

Web components often use a shadow tree with <slot> placeholders. Light-DOM children of the host (elements and text nodes) can be distributed into those slots—shown where the slot sits, while still remaining children of the host in the light DOM.

text.assignedSlot answers: “Which <slot> is this text node assigned to right now?” If none, you get null.

JavaScript
console.log(textNode.assignedSlot); // HTMLSlotElement or null
💡
Beginner tip

Most everyday pages never use slots. On a normal new Text("Hi") that you append to a <p>, assignedSlot stays null. The property becomes useful when you work with custom elements and Shadow DOM.

Concept

Understanding the Property

MDN: the read-only assignedSlot property of the Text interface returns the HTMLSlotElement associated with the text node, or null if none is associated.

  • Instance — read on a specific text node.
  • Read-only — you cannot assign to assignedSlot.
  • Slottable — Elements and Text nodes share this idea.
  • Shadow DOM — meaningful when a host has <slot> in its shadow tree.
Foundation

📝 Syntax

JavaScript
const slot = textNode.assignedSlot;

Value

An HTMLSlotElement, or null if the text node is not associated with a slot.

Shadow DOM

🎨 How Text Nodes Reach a Slot

  1. A custom element attaches an open (or closed) shadow root.
  2. The shadow HTML includes <slot></slot> (default) or named slots.
  3. You put light-DOM children on the host—including a Text node.
  4. The browser assigns matching children into slots. Then text.assignedSlot points at that <slot>.
JavaScript
class DemoHost extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = "";
  }
}
customElements.define("demo-host", DemoHost);

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

console.log(text.assignedSlot); // the <slot> inside the shadow root
📌
Named slots need an Element

A bare text node cannot set slot="title" (no attributes). For a named slot, wrap the text in an element: <span slot="title">Hi</span>. Then span.assignedSlot is the named slot; the nested text node’s assignedSlot is usually still null.

Cheat Sheet

⚡ Quick Reference

GoalCode
Read the slottextNode.assignedSlot
Check if slottedtextNode.assignedSlot !== null
Slot’s local nametextNode.assignedSlot?.localName → "slot"
Nodes in that slottextNode.assignedSlot.assignedNodes()
MDN statusBaseline Widely available (Jan 2020)
Snapshot

🔍 At a Glance

Four facts about Text.assignedSlot.

Kind
property

Read-only

Type
HTMLSlotElement?

or null

Needs
Shadow DOM

slot assignment

Status
baseline

Widely available

Hands-On

Examples Gallery

Examples follow MDN Text.assignedSlot and common Shadow DOM slot patterns. Custom element names in demos use a ctf- prefix so they stay unique in try-it pages.

📚 Getting Started

See null first, then a real slot assignment.

Example 1 — Not Slotted → null

A normal text node outside any slot 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

Appending text to a plain <p> does not involve slots, so assignedSlot stays null.

Example 2 — Default Slot Assignment

Direct text children of a host fill the unnamed <slot>.

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

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

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

How It Works

After the host is connected and the text is a light-DOM child, assignedSlot is the default slot in the shadow root.

📈 assignedNodes, Detach & Named Slots

Cross-check from the slot side and avoid common mix-ups.

Example 3 — Match slot.assignedNodes()

The slot lists the same text node that points back via assignedSlot.

JavaScript
class CtfNodesHost extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = "";
  }
}
customElements.define("ctf-nodes-host", CtfNodesHost);

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

const slot = text.assignedSlot;
const nodes = slot.assignedNodes();
console.log(nodes.length);
console.log(nodes[0] === text);
console.log(nodes[0].data);
Try It Yourself

How It Works

Think of assignedSlot as the reverse lookup of assignedNodes() for that text node.

Example 4 — Becomes null After Removal

Leave the host, lose the assignment.

JavaScript
class CtfRemoveHost extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = "";
  }
}
customElements.define("ctf-remove-host", CtfRemoveHost);

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

console.log(text.assignedSlot !== null); // true
host.removeChild(text);
console.log(text.assignedSlot); // null
Try It Yourself

How It Works

Assignment is live. Detaching the text from the host clears assignedSlot.

Example 5 — Named Slot: Element vs Nested Text

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

JavaScript
class CtfNamedHost extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML =
      '';
  }
}
customElements.define("ctf-named-host", CtfNamedHost);

const host = document.createElement("ctf-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 && wrap.assignedSlot.name); // "title"
console.log(text.assignedSlot); // null (text is not the slotted node)
Try It Yourself

How It Works

Only the node that participates in slot assignment gets a non-null assignedSlot. Nested text lives under the slotted element, so its own assignedSlot stays null.

Applications

🚀 Common Use Cases

  • Debugging web components that project light-DOM text into slots.
  • Confirming a text node reached the intended default slot.
  • Pairing with slot.assignedNodes() in component tests.
  • Teaching Slottable behavior for both Elements and Text.
  • Avoiding confusion when nested text under a slotted element still shows null.
Under the Hood

🔧 How It Works

1

Host + shadow <slot>

Custom element defines where projected content appears.

Shadow
2

Light-DOM Text child

You append a Text node (or HTML creates one) on the host.

Light DOM
3

Browser assigns

Matching nodes are distributed into slots.

Assign
4

Read assignedSlot

HTMLSlotElement when assigned; otherwise null.

Important

📝 Notes

  • Baseline Widely available (MDN, since January 2020).
  • Not Deprecated, Experimental, or Non-standard — no status banner required.
  • Read-only — do not assign to assignedSlot.
  • Bare Text nodes target the default slot only.
  • Related: Text(), textContent, appendChild(), JavaScript hub.
Compatibility

Universal Browser Support

Text.assignedSlot is Baseline Widely available across modern browsers (MDN: since January 2020). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Text.assignedSlot

Read which Shadow DOM slot a text node is assigned to — or null when none.

Universal Widely available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer No Shadow DOM / slots
No support
assignedSlot Excellent

Bottom line: Use text.assignedSlot when debugging or testing slotted text; expect null outside Shadow DOM slot assignment.

Wrap Up

Conclusion

text.assignedSlot returns the HTMLSlotElement a text node is assigned to in a shadow tree, or null. It is most useful when building or testing web components with slots.

Continue with wholeText, Text(), textContent, or the JavaScript hub.

View Examples Gallery wholeText
Pro Tips

💡 Best Practices

✅ Do

  • Expect null outside slotted custom elements
  • Use default slots for bare text children of the host
  • Cross-check with slot.assignedNodes() in tests
  • Wrap text in an element when you need a named slot
  • Re-read assignedSlot after DOM moves

❌ Don’t

  • Try to write text.assignedSlot = ...
  • Assume nested text under a slotted element is also assigned
  • Confuse light-DOM parentage with slot projection
  • Expect named-slot matching on attribute-less Text nodes
  • Forget the host must be connected for reliable assignment demos
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about assignedSlot

Slot lookup for Text nodes in Shadow DOM.

5
Core concepts
📄 01

Read-only

instance property

Kind
🎨 02

HTMLSlotElement

or null

Value
📌 03

Default slot

bare Text children

Pattern
🔄 04

Reverse of

assignedNodes()

Pair
🎯 05

Baseline

widely available

Status
🎯 You understand Text.assignedSlot for slotted text nodes
Review Quick Reference →

❓ 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: detached text nodes, normal DOM text that is not light-DOM content of a slotted custom element, or text that sits inside another element that was slotted (the element is assigned, not the nested text).
Named slots match the slot attribute on Element nodes. A bare Text node has no attributes, so it only goes to the default (unnamed) slot when it is a direct light-DOM child of the host. For named slots, wrap 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.
Did you know?

assignedSlot comes from the Slottable mixin in the DOM standard. The same property exists on Element, so learning it once helps for both elements and text nodes in web components.

Next: Text.wholeText

Learn how adjacent text nodes concatenate into one string.

wholeText →

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)

5 people found this page helpful

JavaScript Text Constructor JavaScript Text wholeText Property