Conditionally rendering components in a shared template

[endymion1818]

I have a template that I want to customise based on whether it's live or not. I've defined my template like this

import { MediaThemeElement } from "media-chrome/dist/media-theme-element";

const template = document.createElement("template");

template.innerHTML = `
    <media-controller>
    <slot name="media" slot="media"></slot>
    <media-control-bar>
        <media-play-button></media-play-button>
    </media-control-bar>
        {{username ?? 'Unknown user'}}
        {{ !islive && <media-seek-backward-button></media-seek-backward-button> }}
    </media-controller>
`;

class TinyTheme extends MediaThemeElement {
  static template = template;
}

if (!globalThis.customElements.get("tiny-theme")) {
  globalThis.customElements.define("tiny-theme", TinyTheme);
}

export default TinyTheme;

Then consumed it like this:

import "media-chrome";
import "./style.css";
import "./tiny-theme";

const username = "bobbytables";
const islive = false;

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <tiny-theme username="${username}" islive="${islive}">
    <video
      slot="media"
      src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
    ></video>
  </tiny-theme>
`;

However the output is as follows:

How would I be able to conditionally render that component? Would it be better to provide different templates for each use case?

Here is a codeSandbox demonstrating the issue

[luwes]

the theme syntax is intentionally made very simple and less featured than JS syntax for example so conditional && or || are not supported.

conditionals are done like so https://www.media-chrome.org/docs/en/themes#conditionals

got it working in a fork
https://codesandbox.io/p/devbox/media-chrome-theme-conditional-3dx4kt

[endymion1818]

Thanks @luwes

I can't see your sandboxes for some reason but I'll work off the docs 👍

[luwes]

Sorry about that, I updated the sandbox
https://codesandbox.io/p/devbox/media-chrome-theme-conditional-3dx4kt

[endymion1818]

Ahh great, didn't get that thing about conditionals to render nested templates, that's awesome 👍

        <template if="!islive">
          <media-seek-backward-button></media-seek-backward-button>
        </template>