How can I tell if an element is in a shadow DOM?

If you call a ShadowRoot's toString() method, it will return "[object ShadowRoot]". According to this fact, here's my approach:

function isInShadow(node) { var parent = (node && node.parentNode); while(parent) { if(parent.toString() === "[object ShadowRoot]") { return true; } parent = parent.parentNode; } return false; } 

EDIT

Jeremy Banks suggests an approach in another style of looping. This approach is a little different from mine: it also checks the passed node itself, which I didn't do.

function isInShadow(node) { for (; node; node = node.parentNode) { if (node.toString() === "[object ShadowRoot]") { return true; } } return false; } 

function isInShadow(node) { for (; node; node = node.parentNode) { if (node.toString() === "[object ShadowRoot]") { return true; } } return false; } console.group('Testing'); var lightElement = document.querySelector('div'); console.assert(isInShadow(lightElement) === false); var shadowChild = document.createElement('div'); lightElement.createShadowRoot().appendChild(shadowChild); console.assert(isInShadow(shadowChild) === true); var orphanedElement = document.createElement('div'); console.assert(isInShadow(orphanedElement) === false); var orphanedShadowChild = document.createElement('div'); orphanedElement.createShadowRoot().appendChild(orphanedShadowChild); console.assert(isInShadow(orphanedShadowChild) === true); var fragmentChild = document.createElement('div'); document.createDocumentFragment().appendChild(fragmentChild); console.assert(isInShadow(fragmentChild) === false); console.log('Complete.'); console.groupEnd();

<div></div>

Element within shadowDOM can be found using getRootNode like below.

function isInShadow(node) { return node.getRootNode() instanceof ShadowRoot; } 

You can check if an element has a shadow parent like this:

function hasShadowParent(element) { while(element.parentNode && (element = element.parentNode)){ if(element instanceof ShadowRoot){ return true; } } return false; } 

This uses instanceof over .toString().

⚠️ Warning: Deprecation Risk

The ::shadow pseudo-element is deprecated in and being removed from from the dynamic selector profile. The approach below only requires that it remain in the static selector profile, but it may also be deprecated and removed there in the future. Discussions are ongoing.

We can use Element's .matches() method to determine if an element is attached to a shadow DOM.

If and only if the element is in a shadow DOM, we will be able to match it by using the selector :host to identify elements that have a Shadow DOM, ::shadow to look in those shadow DOMs, and * and to match any descendant.

function isInShadow(element) { return element.matches(':host::shadow *'); } 

function isInShadow(element) { return element.matches(':host::shadow *'); } console.group('Testing'); var lightElement = document.querySelector('div'); console.assert(isInShadow(lightElement) === false); var shadowChild = document.createElement('div'); lightElement.createShadowRoot().appendChild(shadowChild); console.assert(isInShadow(shadowChild) === true); var orphanedElement = document.createElement('div'); console.assert(isInShadow(orphanedElement) === false); var orphanedShadowChild = document.createElement('div'); orphanedElement.createShadowRoot().appendChild(orphanedShadowChild); console.assert(isInShadow(orphanedShadowChild) === true); var fragmentChild = document.createElement('div'); document.createDocumentFragment().appendChild(fragmentChild); console.assert(isInShadow(fragmentChild) === false); console.log('Complete.'); console.groupEnd();

<div></div>

Lets understand Light Dom:

The Light DOM is the user supplied DOM of an element that hosts a shadow root. For more info read at polymer-project.

https://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

This means: Light DOM is always relative to the next ancestor which hosts a shadow root.

An Element can be a part of the light dom of a custom element while it can be a part of the shadow root of another custom element at same time.

Example:

<my-custom-element> <shadowRoot> <custom-element> <div>I'm in Light DOM of "custom-element" and in Shadow Root of "my-custom-element" at same time</div> </custom-element> </shadowRoot> <div id="LDofMCE"> Im in Light DOM of "my-custom-element"</div> <my-custom-element> 

According to your question:

If you want to know if an element is in a shadow root, you just need to grab the element out of the document.

var isInLD = document.contains(NodeRef); if(isInLD){ console.alert('Element is in the only available "global Light DOM"(document)'); } else { console.log('Element is hidden in the shadow dom of some element'); } 

The only Light DOM which is not preceeded by a shadow Root is part of the document, because Light DOM is relative as shown above.

It doesnt work backwards: if its part of the document its not in a Light DOM at all. You need to check if one of the ancestors is hosting a Shadow Root like suggested from Leo.

You can use this approach with other elements to. Just replace the "document" with e.g. "my-custom-element" and test if div#LDofMCE is in Light DOM relative to "my-custom-element".

Because of the lack of information about why you need this information i cant get closer...

EDIT:

It doesnt work backwards should be understand as follows:

Is this element in a Shadow Root?: document.contains() or the isInShadow(node) method from Leo deliver the answer.

"backwards" Question: Is this element in a Light DOM (In case you start searching relative to document)?: domcument.contains() does not deliver the answer because to be in a Light Dom - one of the elements ancestors needs to be a shadow host.

Come to the Point

• Light DOM is relative.
• An element can take part in a shadow root and in a light dom at the same time. there is no "is part of a shadow DOM OR a light DOM?"

This can check if node or element is in shadow dom, and works for iframes

/** * @param {!Node} node * @return {!boolean} */ function isInShadowRoot(node) { return node.getRootNode().constructor.name === "ShadowRoot"; } 

Or using instanceof

const inShadow = node.getRootNode() instanceof node.ownerDocument.defaultView.ShadowRoot 

You can check if any element is within a shadowDOM by doing:

/** element can be any HTMLELement or Node **/ const root = element && element.getRootNode(); const isOnShadowDOM = root instanceof ShadowRoot; 

• The first line tell us which is the root parent of any element. For example, a lightDOM element will have the root commonly as #document whiled a shadowed one will have the root as #shadow-root.

• The second line tell us if this root is a shadowDOM. Here we simply check if the root element is a stance of ShadowRoot, if yes our const will be true, otherwise false.