I have
div id=outer
#shadowRoot
div id=inner
button
在按钮的单击处理程序中，我想引用 div“内部”。在非 ShadowDom 世界中，这将是document.getElementById('inner')，但是影子 DOM 世界中的等价物是什么？
注意。这是从自定义元素内部访问。我并不想从外部刺穿影子 DOM。
您可以使用绝对路径：useshadowRoot获取 Shadow DOM 内容。
document.querySelector( 'div#outer' ).shadowRoot.querySelector( 'div#inner' )
或者相对路径：使用getRootNode()获取 Shadow DOM 根
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
