Блог

Я пытаюсь добавить кнопку аутентификации Google в простой проект polymer 3, я следую этому руководству:https://developers.google.com/identity/sign-in/web/sign-in?authuser=0

Как сказано в руководстве, я включаю библиотеку платформы Google с:

 <script src="https://apis.google.com/js/platform.js" async defer></script>
  

А также у меня есть div для кнопки по мере необходимости:

 <div class="g-signin2" data-onsuccess="onSignIn"></div>
  

Проблема в том, что я хочу иметь эту кнопку внутри веб-компонента, а скрипт не работает, потому что он не может видеть div, который находится под shadow DOM (скрипт использует селектор запросов с именем класса, я думаю). Кнопка работает, только если она находится непосредственно в index.js (не под shadow root).

Есть ли какой-нибудь способ достичь того, что мне нужно?

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

Если вы хотите работать с Shadow DOM и выполнять вход в Google, вам следует поместить кнопку Google в Light DOM, чтобы быть уверенным, что она будет обнаружена скриптами Google.

 connectedCallback() {
    this.innerHTML = `<div class="g-signin2" data-onsuccess="onSignIn"></div>`
}
  

Затем, поскольку кнопка будет замаскирована теневым DOM, вам следует реализовать одно из следующих решений.

Вариант 1: Вставьте кнопку в Shadow DOM

Используйте <slot> элемент, чтобы кнопка Google отображалась в Shadow DOM.

 connectedCallback() {
    this.innerHTML = `<div class="g-signin2" data-onsuccess="onSignIn"></div>`
    this.shadowRoot.innerHTML = `Connect with Google: <slot></slot>`
}
  

Вариант 2: Нажмите на скрытую кнопку программно

Создайте свою собственную <button> в Shadow DOM и при нажатии на нее отправьте щелчок на кнопку Google.

 connectedCallback() {
    this.innerHTML = `<div class="g-signin2" data-onsuccess="onSignIn"></div>`
    this.shadowRoot.innerHTML = `<button>Connect with Google</button>`

    this.shadowRoot.querySelector( 'button' ).onclick = () => 
        this.querySelector( '.g-signin2 .abcRioButtonContentWrapper' ).click()
}
  

ПРИМЕЧАНИЕ: Возможно, вам не следует создавать новые пользовательские элементы с помощью Polymer, потому что эта библиотека больше не разрабатывается.