I was actually just looking at that after posting this (lit is new to me). That's a pretty cool solution. I'd still prefer an option to have the html in its own file, but that is just my taste. I know a lot of people feel exactly the opposite.

Maybe a bit pedantic - but I prefer using lit-html, not lit.

Lit is a bit too "frameworky" for my taste, I generally just use vanilla classes that extend HTMLElement and have a render function that renders the lit-element template to the light dom.

Something like:

    import {html, render} from 'lit-html';

    class AppComponent extends HTMLElement {
      connectedCallback() {
        this.template = () => html`<markup here>`;
        this.render();
      }
    
      render() {
        if(this.template)
          render(this.template(), this)
      }
    }

    customElements.define('app-component', AppComponent);

Perfect, and perfect timing. I was recently tasked with creating a small standalone web app and everything feels like overkill to me. This might be the perfect fit. Thanks for the explanation.