> my biggest problem was simply that I still had to add all my templates to a single long html file.
The alternative (atleast when using frameworks like React and Vue with packagers like webpack is having it all in a single long html file. Which is just shifting markup from html to js. The other alternative is to dynamically load the html via ajax calls.
> I had a scaffolded page structure at top. and then dozens of template sections following it. and then as some templates are supposed to call other templates (form inside page section) there was a clear hierarchy but my html file was flat
Here you could make use of the document.ready event, and a js script that automatically parses and saves all <template> tag by id. That way, the templates calling other templates have a single source of truth for all dependent templates. You could also combine this will lazy loading via ajax calls.
> I really wanted to be able to breakup my html file into smaller composable ones without having to do that in JS. but there is no current solution for html importing other html files
There is no getting around JS if you want client side dynamic rendering - that's what its for. HTML is for static content, css for styling, JS for everything else.
The alternative (atleast when using frameworks like React and Vue with packagers like webpack is having it all in a single long html file. Which is just shifting markup from html to js. The other alternative is to dynamically load the html via ajax calls.
> I had a scaffolded page structure at top. and then dozens of template sections following it. and then as some templates are supposed to call other templates (form inside page section) there was a clear hierarchy but my html file was flat
Here you could make use of the document.ready event, and a js script that automatically parses and saves all <template> tag by id. That way, the templates calling other templates have a single source of truth for all dependent templates. You could also combine this will lazy loading via ajax calls.
> I really wanted to be able to breakup my html file into smaller composable ones without having to do that in JS. but there is no current solution for html importing other html files
There is no getting around JS if you want client side dynamic rendering - that's what its for. HTML is for static content, css for styling, JS for everything else.