I have a structure:

<div>
    #shadow-root
        <span>

How do I reference the div from the span?

span.parentNode is the #shadow-root, and .parentNode from that is null

I have a structure:

<div>
    #shadow-root
        <span>

How do I reference the div from the span?

span.parentNode is the #shadow-root, and .parentNode from that is null

• javascript
• polymer
• shadow-dom

Share Improve this question Follow asked Jul 15, 2014 at 18:10 user578895user578895 7

• 1 That makes no sense: jsfiddle/9FzAM – Ian Commented Jul 15, 2014 at 18:17
• 1 @Ian your example is the regular DOM; this question is about shadow-DOM (enable in chrome devtools.) – Evan Davis Commented Jul 15, 2014 at 18:22
• @Mathletics A ha! I seriously had no idea what they meant by "shadow dom" (the # made me think "id"), and somehow missed the "shadow-dom" and "polymer" tags. Thanks for pointing that out – Ian Commented Jul 15, 2014 at 18:23
• 3 shadowRoot.host would give you the <div>. Likewise, div.shadowRoot would get you the div's shadow root. – ebidel Commented Jul 15, 2014 at 18:25
• 1 @ebidel Good call. You can see host and parentNode properties of the shadow root with console.dir(child.parentNode); – Ian Commented Jul 15, 2014 at 18:27

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

You can use shadowRoot.host to give you the <div>. Likewise, div.shadowRoot would get you the div's shadow root.

First find shadowRoot host from the element el.getRootNode().host and then use closest()

el.getRootNode().host.closest('div.my_div')