Earlier quoted context omitted.
If you use a good rendering library, like lit-html then (at least in vscode) you get very nice syntax highlighting, completion and validation: html` `
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``;
this.render();
}
render() {
if(this.template)
render(this.template(), this)
}
}
customElements.define('app-component', AppComponent);