如何遍历 shadow DOM 中的元素

Question

我有

div id=outer
  #shadowRoot
    div id=inner
    button

在按钮的点击处理程序中，我想引用 div“inner”。在非 shadowDom 世界中，这将是document.getElementById('inner')，但在 shadow DOM 世界中等价物是什么？

注意。这是从自定义元素内部访问。我不是想从外面刺穿 shadow DOM。

Answer 1

您可以使用绝对路径：用于shadowRoot获取 Shadow DOM 内容。

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

或者相对路径：用于getRootNode()获取Shadow DOM根

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

例子：

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

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