如何遍历 shadow DOM 中的元素

【问题标题】：how do I traverse elements within a shadow DOM如何遍历 shadow DOM 中的元素
【发布时间】：2019-05-05 14:25:10
【问题描述】：

我有

div id=outer
  #shadowRoot
    div id=inner
    button

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

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

【问题讨论】：

Is it possible to access Shadow DOM elements through the parent document?的可能重复
我试图从 shadowRoot 中的事件访问，而不是通过父文档访问。

标签： javascript html web-component shadow-dom

【解决方案1】：

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

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

或者相对路径：使用getRootNode()获取Shadow DOM root

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'

&lt;div id=outer&gt;&lt;/div&gt;

【讨论】：

完美，我正在寻找的正是getRootNode()。非常感谢。