Quick-look AR button disappears on iOS when using google model viewer + svelte components

Question

The issue I'm having is that whenever I try to use any svelte components or special html attributes, the quick look AR button does not appear with google model viewer on iOS.

I know this is pretty specific but I'm looking to create an AR project with both of these, and if I can't use components, Svelte won't be doing much for me (and I've been loving to code in svelte!)

for example, this code snippet works (quick look button appears on iOS)

<div id="viewer-page">
    <div id="back" onclick="onBackClicked()">Back</div>
    <model-viewer
        id="model-viewer"
        shadow-intensity="1"
        ar
        ar-modes="webxr scene-viewer quick-look"
        ar-scale="auto"
        camera-controls
        alt="A 3D model carousel"
        quick-look-browsers="safari chrome"
    />
</div>

But as soon as I even add an unrelated component up/down/or at the same level in the heirarchy as the model viewer, quick look button doesn't appear anymore on iOS (see below, Template component added, which has no interaction with model viewer)

<div id="viewer-page">
    <div id="back" onclick="onBackClicked()">Back</div>
    <model-viewer
        id="model-viewer"
        shadow-intensity="1"
        ar
        ar-modes="webxr scene-viewer quick-look"
        ar-scale="auto"
        camera-controls
        alt="A 3D model carousel"
        quick-look-browsers="safari chrome"
    />
    <Template />
</div>

I've tried so many different combinations, the svelte conditional html breaks it as well, svelte event modifiers, attributes, etc.

I know this is pretty specific, but was hoping someone more familiar with what goes on under the hood with svelte could give me some insight, it seems like it messes up when it has to parse svelte specific markup in the html.

Thanks!