我如何遍历阴影中的元素 DOM

Question

我有

div id=outer
  #shadowRoot
    div id=inner
    button

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

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

Answer 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'

<div id=outer></div>

我如何遍历阴影中的元素 DOM

how do I traverse elements within a shadow DOM

html

javascript

web-component

shadow-dom