Template html and template string in web components

Question

Is it better to use html template (and then html import) to create web components or to use template string? What are pros and cons of these methods?

Pseudocarp

Answer 1

Using html template files is better for reuse: the same file can be used in different web components. Also they are better displayed in most IDEs as they are recognized as full HTML code.

Using template strings is faster (inline). They don't rely on HTML Imports which is not adopted by every browser vendors. Also you can use template literals to insert directly value of JavaScript variables in the DOM.

Actually there's no much diffrences because there's a workaround for every differences list above (i.e. you can reuse template strings if you save them as text file, or you can load html templates withour HTML imports).

Acetum

Thank you. Will it HTML Imports be adopted by all browsers? – Pseudocarp

Not Mozilla (until now), the others have not taken position, but the polyfill is fine! – Acetum

Is this still a valid answer now that html imports are deprecated? – Nunnery

@GrantNoe, html template files can be imported via the fetch API – Vet

Yes like here https://mcmap.net/q/929153/-include-template-file-in-an-html-file-similar-to-css – Acetum