如何遍历 Shadow DOM 中的元素

Question

我有

div id=outer
  #shadowRoot
    div id=inner
    button

在按钮的点击处理程序中，我想引用

内部

。 在没有Shadow DOM的情况下，这将是document.getElementById('inner')，但在Shadow DOM世界中，相当于什么？

注：这是从自定义元素内部访问。 我不是试图从外部突破Shadow DOM。

- pinoyyid

---

可能是重复问题：是否可以通过父文档访问Shadow DOM元素？ - ՕլՁՅԿ

我试图从shadowRoot内部的事件访问，而不是通过父文档访问。 - pinoyyid

Answer 1

你可以使用绝对路径：使用 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>

- Supersharp

---

完美，我特别需要的是 getRootNode() 。非常感谢。 - pinoyyid