как пройти элементы в теневом DOM - PullRequest
Новая
       21

как пройти элементы в теневом DOM

1 голос
/ 05 мая 2019

У меня есть 

div id=outer
  #shadowRoot
    div id=inner
    button

В обработчике нажатия кнопки я хочу сослаться на div "inner".В мире без теней это было бы document.getElementById('inner'), но каков эквивалент в мире теневого DOM?

Примечание.Это доступ из пользовательского элемента.Я не пытаюсь пробить теневой DOM снаружи.

1 Ответ

2 голосов
/ 05 мая 2019

Вы можете использовать абсолютный путь: используйте 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>
...