Как получить элемент внутри тени root? - PullRequest
Новая
       26

Как получить элемент внутри тени root?

2 голосов
/ 09 мая 2020

У меня есть содержимое html внутри тени root, которое является динамическим c, поступающим через SDK микроблинков.

Мне нужно добавитьEventListener в #fileBtn, поэтому всякий раз, когда по нему щелкают, мне нужно что-то делать. Но поскольку это тень root, я не могу получить доступ к свойству DOM. Также для этого я использую reactjs. 

<microblink-ui-web tabs="true" autoscroll="true" style="height: 319.562px;">
    #shadow-root (open)
    <div class="container root" max-width="500px 600px 630px">
    <div class="container main">
      <div class="container intro dropzone active">
        <div class="flex-vertical">
          <p class="intro-label">
            <slot name="labels.chooseInputMethod">Choose input method</slot>
          </p>
          <div class="flex-horizontal">
            <input
              type="file"
              accept="image/png,image/gif,image/bmp,image/jpeg,image/x-png,image/vnd.wap.wbmp"
              id="file"
            />
            <button type="button" class="intro-button" id="fileBtn">
            </button>
            <button type="button" class="intro-button" id="cameraLocalBtn">
            </button>
          </div>
        </div>
      </div>
    </div>
    </div
></microblink-ui-web>

Заранее спасибо !!!

1 Ответ

2 голосов
/ 09 мая 2020

Используйте свойство shadow Root для доступа к содержимому Shadow DOM. 

let mb = document.querySelector( 'microblink-ui-web' )
mb.shadowRoot.querySelector( '#fileBtn' ).addEventListener( 'click', clicked )

function clicked( ev ) {
    console.log( ev.target.id + 'clicked' )
}
...