Question

我正在尝试将google auth按钮添加到一个简单的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（我认为脚本使用具有类名的查询选择器）。仅当按钮直接位于index.js中（而不是影子根目录下）时，按钮才起作用。

有什么办法可以满足我的需求？

谢谢。

Answer 1

如果要使用Shadow DOM和Google登录，则应将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：以编程方式单击隐藏的按钮

在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身份验证按钮不适用于Shadow Dom

1 个答案: