javascript - how do I traverse elements within a shadow DOM - Stack Overflow

admin管理员组

文章数量:1401384

I have

div id=outer
  #shadowRoot
    div id=inner
    button

In the click handler of the button, I want to reference the div "inner". In a non shadowDom world, this would be document.getElementById('inner'), but what is the equivalent in a shadow DOM world?

NB. This is accessing from within the custom-element. I am not trying to pierce the shadow DOM from outside.

I have

div id=outer
  #shadowRoot
    div id=inner
    button

In the click handler of the button, I want to reference the div "inner". In a non shadowDom world, this would be document.getElementById('inner'), but what is the equivalent in a shadow DOM world?

NB. This is accessing from within the custom-element. I am not trying to pierce the shadow DOM from outside.

• javascript
• html
• web-ponent
• shadow-dom

Share Improve this question Follow edited May 15, 2020 at 17:01 Supersharp 31.3k1111 gold badges102102 silver badges147147 bronze badges asked May 5, 2019 at 14:25 pinoyyidpinoyyid 22.4k1717 gold badges7575 silver badges124124 bronze badges 2

• Possible duplicate of Is it possible to access Shadow DOM elements through the parent document? – P Varga Commented May 5, 2019 at 15:11
• Rather than access through the parent document, I was trying to access from an event within the shadowRoot. – pinoyyid Commented May 5, 2019 at 15:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You could use the absolute path: use shadowRoot to get the Shadow DOM content.

document.querySelector( 'div#outer' ).shadowRoot.querySelector( 'div#inner' )

Or the relative path: use getRootNode() to get the Shadow DOM root

event.target.getRootNode().querySelector( 'div#inner' )

Example:

outer.attachShadow( { mode: 'open' } )
    .innerHTML = `
        <div id=inner></div>
        <button>clicked</button>
    `
    
outer.shadowRoot.querySelector( 'button' ).onclick = ev =>
  ev.target.getRootNode().querySelector( 'div#inner' ).innerHTML = 'clicked'

<div id=outer></div>

本文标签： javascripthow do I traverse elements within a shadow DOMStack Overflow