如何在Web Component中正确渲染Google Sign-in Button

Google GSI登录客户端默认在全局document作用域下查找自身动态插入的iframe元素。你把按钮渲染容器放在了Web Component的Shadow DOM内部，Shadow DOM的天然隔离性会阻断全局DOM查询，库找不到对应id的iframe，就会抛出这个resize失败的错误。

选任意一种适配你的场景即可：

• 放弃Shadow DOM内渲染按钮：把.login-button#google容器直接挂到自定义元素的Light DOM下（不要append到shadowRoot），GSI走全局DOM查询就能正常找到iframe完成渲染和尺寸调整，改动最小。
• 保留Shadow DOM隔离，临时劫持DOM查询：调用renderButton前临时改写document.getElementById，让GSI查找元素时优先穿透到当前组件的shadowRoot下检索，渲染完成后恢复原生方法即可，代码参考：

connectedCallback() {
  this.shadowRoot.appendChild($gameLoginTemplate.content.cloneNode(true))

  google.accounts.id.initialize({
    client_id: "你的实际client_id",
    callback(response) {
      console.debug("[inspect]", { response })
    }
  });

  // 临时劫持getElementById
  const nativeGetEl = document.getElementById.bind(document);
  document.getElementById = id => this.shadowRoot.getElementById(id) || nativeGetEl(id);

  google.accounts.id.renderButton(
    this.shadowRoot.querySelector(".login-button#google"),
    { theme: "outline", size: "large" }
  );

  // 渲染完成后恢复原生方法
  setTimeout(() => document.getElementById = nativeGetEl, 0);
}

• 用GSI的声明式渲染API：不要手动调用renderButton，直接在模板里写GSI的自动渲染标签，之后手动指定扫描根为当前shadowRoot，让库直接在Shadow DOM内部完成所有渲染逻辑，不会触发全局查询：
  首先修改模板内容：

$gameLoginTemplate.innerHTML = `
  <section>
     <div 
        class="g_id_signin"
        data-theme="outline"
        data-size="large"
        data-client_id="你的实际client_id"
     ></div>
  </section>
`;

然后把connectedCallback里的renderButton调用替换成：

// 初始化完成后直接扫描shadowRoot下的声明式标签渲染
google.accounts.id.render(this.shadowRoot);

注意：后两种方案要确保你引入的GSI客户端库是较新的版本，旧版本对Shadow DOM的适配不完善，可能还会有其他样式或者交互异常。

内容的提问来源于stack exchange，提问作者Ibrahem Alhofe