error: media-controller failed to upgrade! in Svelte

[MarkLyck]

When trying to use the template theming in Svelte I get the following error:

[mux-player 3.3.0] <media-controller> failed to upgrade!

I created a minimal reproducible example in svelte-kit, by making a single +page.svelte file with the following code:

<script lang="ts">
  import '@mux/mux-player';
  import 'media-chrome';
</script>

<div>
  <template id="tiny-theme">
    <media-controller>
      <slot name="media" slot="media"></slot>
      <media-control-bar>
        <media-play-button></media-play-button>
      </media-control-bar>
    </media-controller>
  </template>

  <mux-player
    theme="tiny-theme"
    stream-type="on-demand"
    playback-id="A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg"
  ></mux-player>
</div>

If I remove the theme="tiny" the video loads fine with the default theme, and the error is now shown. However if I try to apply this simple theme copied from the docs, the video never loads, and the error above is thrown.

I have tried disabling SSR, or only rendering it in the browser after onMount, but that doesn't make a difference.

minimal reproduction: https://stackblitz.com/edit/bolt-sveltekit-rpzv8qq5?file=src%2Froutes%2F%2Bpage.svelte

[luwes]

Thanks for the feedback! It's expected in Svelte due to how it creates template elements, it's not the same how the browser does it. It's either that templates are special in Svelte or they don't set template.content.innerHTML internally.

The workaround is something like this https://player.style/themes/instaplay?framework=svelte&embed=template