Кнопка аутентификации Google не работает с shadow dom - PullRequest
Новая
       28

Кнопка аутентификации Google не работает с shadow dom

0 голосов
/ 29 марта 2019

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

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

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

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

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

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

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

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

1 Ответ

1 голос
/ 31 марта 2019

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

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

Тогда, поскольку кнопка будет замаскирована Shadow 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, поскольку эта библиотека больше не разрабатывается.

...