Google 身份验证按钮不适用于阴影 dom

Question

我正在尝试将 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>

问题是我想将此按钮放在 Web 组件中，但脚本无法正常工作，因为它看不到阴影 DOM 下的 div（脚本使用查询选择器class 我想的名字）。按钮仅在直接位于 index.js（不在 shadow root 下）时才有效。

有什么方法可以实现我所需要的吗？

提前致谢。

Answer 1

如果您想使用 Shadow DOM 和 Google 登录，您应该将 Google 按钮放在 Light DOM 中以确保它会被 Google 脚本检测到。

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

那么，由于按钮会被阴影遮住DOM，您应该实施以下解决方案之一。

选项 1：在阴影中插入按钮 DOM

使用 <slot> 元素使 Google 按钮出现在阴影中 DOM。

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

选项 2：以编程方式单击隐藏按钮

在 Shadow DOM 中创建您自己的 <button> 并在单击它时发送一个单击到 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 创建新的自定义元素，因为这个库已经不再开发了。

Google 身份验证按钮不适用于阴影 dom

Google authentication button not working with shadow dom

google-authentication

shadow-dom

polymer

polymer-3.x