Using appendChild with Google's Model Viewer

Question

Due to issues with client implementations, my instance of Google's Model Viewer appends itself to the main body upon launching it then opens a fullscreen modal and dismisses the poster. Upon closing the modal, it shows the poster again then re-appends itself to its last location in the DOM (I am aware this is bad practice, but sadly it was the only solution we could find).

This works great the first time it is launched, but it seems to break the viewer if launched again. After launching the modal then closing it (appending/re-appending it to the correct locations), I am still able to launch the modal a second time and dismiss the poster correctly, but the 3D model is suddenly not rendering at all. What's more, it appears that the <canvas> element with class="webgl-canvas" in model-viewer's shadowRoot seems to disappear from the DOM entirely.

If I remove the appendChild() calls and just allow it to render the fullscreen modal from its original location, it seems to work fine. Here are some examples of my code:

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);
  }

Does appending/re-appending model viewer cause something to break with the 3D model its rendering? What's causing the <canvas> element to disappear?