Templates are solid and are slightly more performant than including your html-in-js for webcomponents, but that said I really wish there was some sort of web component file format that incorporated:

- The HTML

- The JS

- The CSS

In some sort of a structured way that's easy to load and distribute as a library. I don't like that to use webcomponents the right way, you have to load the logic from an import and then inline the html aspects of it.

▲

jfagnani 2 days ago | parent | next [-]

There is a spec issue open for HTML Modules [1] along with a few proposals. The concept needs some motivated champions to see it through. Microsoft has shown some interested in this lately.

There are userland single-file component projects, like my Heximal[2] project. Though Hexiaml specifically doesn't tackle the module format - it requires some kind of HTML Module polyfill.

I don't think the current situation is so bad though. The container format should mostly be irrelevant to consumers of a component. You need to import the component defintion whether that definition is in a .js file or .html file. Once you import it you use it the same.

There should be very few cases where the file format matters. Maybe for use when JS is turned off if HTML-based web components are considered safe to evaluate (their templates might expressive enough to potentially allow attacks).

[1]: https://github.com/WICG/webcomponents/issues/645

[2]: https://heximal.dev/ (Sorry the site is messed up on mobile. I need to fix it!)

	▲	epolanski 2 days ago \| parent [-]
		Not gonna lie, I like the design of heximal, but by the end of reading the docs I start missing simple php-like templating.

▲

marcosdumay 2 days ago | parent | prev | next [-]

Well, turns out you can just add style tags to the template, and they will be scoped there. It's the only way to get local CSS rules.

You can also add script tags wherever you want. They will execute when added to the DOM, but they won't be scoped.

	▲	spankalee 2 days ago \| parent [-]
		Styles aren't scoped to templates. You might be thinking of shadow DOM: if you clone your template into a ShadowRoot, then any included styles will be scoped to that ShadowRoot.

▲

dexwiz 2 days ago | parent | prev [-]

Salesforce actually had a really nice module format called LWC that does that. Also supports one way binding. Too bad they never championed outside of customer use.