JavaScript Node isConnected Property

What You’ll Learn

The Node.isConnected property returns a Boolean: whether the node is connected to a Document (directly or indirectly). Learn create-vs-append, Shadow DOM, why Attr is always false, and five examples with try-it labs.

Introduction

Creating a node with document.createElement() does not put it on the page. Until you insert it (or it lives under a connected shadow root), isConnected is false. After a successful insert into the document tree, it becomes true.

That Boolean is useful in components, custom elements, and cleanup logic: “Am I still in the document?”

Understanding isConnected

MDN: the read-only isConnected property returns a boolean indicating whether the node is connected (directly or indirectly) to a Document object.

• true — the node’s root is a document (including via shadow trees that are connected).
• false — detached node, fragment-only node, or special cases like Attr.
• Read-only — you cannot assign node.isConnected = true.
• Changes when you append, remove, or adopt nodes.

📝 Syntax

const connected = node.isConnected; // true or false

Return value

A boolean: true if connected to its relevant context object (a document), otherwise false.

⚠️ Attr Is Never Connected

An Attr node always returns false for isConnected, even when its ownerElement is in the document. Attributes are associated with elements but are not part of the node tree the same way—an Attr has no parent and is its own root, so it is never considered connected.

Examples Gallery

Examples follow MDN Node.isConnected patterns. Use View Output or Try It Yourself for each case.

const test = document.createElement("p");
console.log(test.isConnected); // false

document.body.appendChild(test);
console.log(test.isConnected); // true

false
true

const el = document.createElement("div");
document.body.appendChild(el);
console.log(el.isConnected); // true

el.remove();
console.log(el.isConnected); // false

true
false

const host = document.createElement("div");
document.body.appendChild(host);

const shadow = host.attachShadow({ mode: "open" });
const style = document.createElement("style");
console.log(style.isConnected); // false

shadow.appendChild(style);
console.log(style.isConnected); // true

false
true

const el = document.createElement("a");
el.setAttribute("href", "/docs");
document.body.appendChild(el);

const attr = el.getAttributeNode("href");
console.log(el.isConnected);   // true
console.log(attr.isConnected); // false
console.log(attr.ownerElement === el); // true

true
false
true

const frag = document.createDocumentFragment();
const item = document.createElement("li");
frag.appendChild(item);
console.log(item.isConnected); // false

document.body.appendChild(frag); // moves children into the body
console.log(item.isConnected); // true

false
true

🚀 Common Use Cases

• Custom elements — run setup when connected; tear down when not.
• Avoid double-insert — skip appendChild if already connected.
• Cleanup guards — do not update DOM if !node.isConnected.
• Shadow components — confirm styles/slots are in a connected tree.
• Debugging detach bugs — log isConnected after remove/replace.

📝 Notes

• Baseline Widely available (MDN, since January 2020).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only Boolean; insertion/removal updates the value.
• Attr.isConnected is always false.
• Related: firstChild, lastChild, childNodes, JavaScript hub.

💡 Best Practices