I've been on the Polymer team, making web component libraries, for a long time. And while we used to promote "single file" style authoring in HTML files, we've come around (me very strongly) to the idea that it's better to do single-file components in JavaScript.

This has resulted in our newer lit-html and LitElement libraries, where the DOM rendering is done in JavaScript, but it's still possible to do single-file style:

    import {LitElement, css, html} from 'lit-element';

    export class MyElement {
      static styles = `
        :host {
          display: block;
          background: red;
        }
      `;

      static properties = {
        name: {},
      };

      render() {
        return html`
          <h1>Hello ${this.name}</h1>
        `;
      }
    }
    customElements.define('my-element', MyElement);

There are a number of reasons why this is better, IMO. Not requiring any builds and utilizing the JS module graph are big ones.

The most important though is that the essential job of templates is to interpolate data into DOM. It's much easier this by building DOM in JS, than by trying to access and transform data in HTML.

Templates need some kind of expression language. If the template is in HTML then you need to invent expression delimiters, the expression syntax and semantics, and a way to get data into HTML: HTML doesn't natively have a way to refer to JavaScript objects. This is all custom, needs code to implement, and you need to train developers on it.

On the other hand if you write templates in JS you can take advantage of full JavaScript expressions, imports, and natural lexical scoping... and the data is typically already in JavaScript.