如何遍歷 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' )

例子：

 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>