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

我正在尝试将google auth按钮添加到一个简单的polymer 3项目中，我遵循本教程：

正如教程中所说，我将谷歌平台库包括：

<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（不在shadowroot下）中时才起作用

有什么方法可以达到我所需要的吗

---

提前感谢。

如果您想使用Shadow DOM和Google登录，您应该将Google按钮置于Light DOM中，以确保Google脚本能够检测到它

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

connectedCallback（）{
this.innerHTML=``
}

然后，因为按钮将被阴影DOM屏蔽，所以应该实现以下解决方案之一

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

使用

元素使Google按钮显示在阴影DOM中

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

connectedCallback（）{
this.innerHTML=``
this.shadowRoot.innerHTML=`connectwithgoogle:`
}

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

在shadowdom中创建您自己的

，单击它时，向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()
}

connectedCallback（）{
this.innerHTML=``
this.shadowRoot.innerHTML=`connectwithgoogle`
this.shadowRoot.querySelector（'button'）。onclick=（）=>
此.querySelector（'.g-signn2.abcriobuttoncontentwraper'）。单击（）
}

---

NB:也许您不应该使用聚合物创建新的自定义元素，因为该库不再开发