将 appendChild 与 Google 的模型查看器配合使用

问：

由于客户端实现的问题，我的 Google 模型查看器实例在启动时将自己附加到主体中，然后打开一个全屏模式并关闭海报。关闭模态后，它会再次显示海报，然后将自身重新附加到 DOM 中的最后一个位置（我知道这是不好的做法，但遗憾的是，这是我们能找到的唯一解决方案）。

这在第一次启动时效果很好，但如果再次启动，它似乎会破坏查看器。启动模态然后关闭它（将其附加/重新附加到正确的位置）后，我仍然能够再次启动模态并正确关闭海报，但 3D 模型突然根本没有渲染。更重要的是，model-viewer 的 shadowRoot 中的元素似乎完全从 DOM 中消失了。<canvas>class="webgl-canvas"

如果我删除调用并只允许它从其原始位置呈现全屏模式，它似乎可以正常工作。以下是我的代码的一些示例：appendChild()

private [$openModelViewerModal](e: CustomEvent) {
    this[$parentElement] = this.parentElement;
    document.body.appendChild(this);
    this.shadowRoot!.querySelector('.model-viewer-modal')?.classList.add('shown');
    this.dismissPoster();
}

private [$closeModelViewerModal](e: CustomEvent) {
    this[$parentElement]?.appendChild(this);
    this.shadowRoot!.querySelector('.model-viewer-modal')?.classList.remove('shown');
    this.showPoster();
}

section.model-viewer-modal.shown model-viewer {
    display:flex !important;
    overflow:hidden;
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
    height: 100% !important;
    width: 100% !important;
  }
section.model-viewer-modal.shown {
    flex-direction: row;
    margin: 0px !important;
    position: fixed !important;
    inset: 0px !important;
    height: 100vh !important;
    width: 100vw !important;
    display: flex;
    visibility: visible;
    z-index: 9999999 !important;
    transform: translateZ(1000px);
  }

追加/重新追加模型查看器是否会导致其渲染的 3D 模型中断？是什么导致元素消失？<canvas>