我有
div id=outer
#shadowRoot
div id=inner
button
在按钮的单击处理程序中,我想引用 div“内部”。在非 shadowDom 世界中,这将是
document.getElementById('inner')
,但影子 DOM 世界中的等价物是什么?注意。这是从自定义元素中访问的。我不想从外部刺穿影子 DOM。
最佳答案
您可以使用绝对路径:使用 shadowRoot
获取 Shadow DOM 内容。
document.querySelector( 'div#outer' ).shadowRoot.querySelector( 'div#inner' )
或者相对路径:使用
getRootNode()
获取 Shadow DOM 根event.target.getRootNode().querySelector( 'div#inner' )
例子:
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>
关于javascript - 如何遍历 shadow DOM 中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55992972/