How to use HTML templates with javascript Web component

Question

HTML templates are nice and fast. The problem is HTML import has been deprecated. This means it makes the most sense to put web components each in their own .js file instead of .html files. However if one uses a .js file, then as far as I can tell, one can't use a precompiled template to attach at the shadow DOM, one has to use some fixed string that I imagine is parsed every time.

With .html web component one could do:

    shadowRoot.appendChild(myTemplate.content.cloneNode(true));

However in a .js file you have to do something like:

something.innerHTML = `
  <style>
   
    ...
    /* lots of style */
  </style>
  <b>I'm in shadow dom!</b>
  <!-- lots of html -->
  <slot></slot>
`;

Is this not a bad idea because the text must be revaulated every time, whereas a template is evaulated once?

So what is the recommened way of embedding one's style and html in a .js file for a web component?

I am using vanilla JS, no frameworks.

As for the CSS, you can place it in a stylesheet, then dynamically generate a <link> element that points to that stylesheet. — Wais Kamal
– Wais Kamal, Commented Dec 7, 2021 at 13:27

Danny '365CSI' Engelman · Accepted Answer · 2021-12-07 17:11:30Z

4

+1 for Vanilla code, your code will last another 26 JavaScript years.

There is no recommended way, it all depends on your use case.

You can put <template id="MY-COMPONENT">in your main HTML file,
and do document.getElementById("MY-COMPONENT").content.cloneNode(true) in your component code (knowing when your DOM is ready)
You can do document.createElement("template"), and take it from there
You can use the <load-file> Web Component to load external HTML files.
(no template advantage here)

So it all comes down to understanding what your application needs.

Note that the pattern you see in many blogs:

 let template = document.createElement("template");
 template.innerHTML = ` CSS & HTML CONTENT `;

 ...

 this.shadowRoot.appendChild(template..content.cloneNode(true));

In many use cases, where a parsed template is hardly re- used, is an expensive way of writing:

  this.shadowRoot.innerHTML = ` CSS & HTML CONTENT `;

Be aware the append template approach has (potential) (edge-case) disadvantages as well;
its content is parsed async, while .innerHTML= is synchronous.

An while you are at it, be sure to learn the differences:

edited Dec 7, 2021 at 17:11

answered Dec 7, 2021 at 17:05

Danny '365CSI' Engelman

22.3k2 gold badges49 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

run_the_race Over a year ago

Big thanks Danny! Its really hard to learn this stuff, its like simple toy examples, and then litelement/polymer, with nothing inbetween.

Danny '365CSI' Engelman Over a year ago

Over the past 4 years I learned from the gurus here in StackOverflow, SuperSharp, Intervalia. Then stepped into their footsteps here on SO (trying to give detailed answers). And some months ago I put some more advanced examples on Dev.To All Vanilla code, Lit (and others) are Tools, not the Technology.

run_the_race Over a year ago

Reading your answer again a year later. Still boggles my mind, online guides tell one to use html templates, but then give no way to link to them, one has to inline all the templates from web components one is going to use, which is not modular at all. One should be able to link an HTML file that contains CSS and JS as the web component.

Danny '365CSI' Engelman Over a year ago

Write your own <load-file> : dev.to/dannyengelman/…

Collectives™ on Stack Overflow

How to use HTML templates with javascript Web component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related