Discussion on: lit-html templates from zero to hero

[Jeff Hilton]

I have used mustache style templating for a long time on the client and even on the server using mustache PHP. I’m just taking a hard look now at web components and by reading thru articles like this one I’ve got a good idea how the lit-* stuff works and it seems like a strong and lightweight approach.

One thing I still haven’t wrapped my head around is having the templates so integrated with the JavaScript code. I usually kept templates as separate files or as essentially HTML type strings. Do you see any benefits or problems with the templates and code being coupled like this? One of the first things I found myself thinking about lit-HTML was how could I store templates separately for reuse and to be able replace a template used by a component dynamically based on conditions etc.

Any thoughts on this? Perhaps once I put them in use more, the benefits of this approach will be more clear.

[Julio Castillo Anselmi]

Hi! Thanks for leaving your comment.

Honestly, at first, I was not convinced by the idea of ​​having HTML, CSS and JavaScript in the same file, much less that everything was embedded in a JavaScript class. But I have gotten used to it and now I think it is a matter of personal taste rather than a problem or technical convenience. And I could also say it's a standard considering React and Vue. The good point about it is that I can understand the whole piece just seeing one file.

Anyway, if you want to have the HTML and CSS code in separate files, you can do it, but they will have to be ES6 modules so you can reuse them by importing them.

Imagine you have a template menu and a template footer that you will surely reuse in many pages templates.
So you can have a separate file for each one.

menu.js

export const menu = (opts) =>  html`
  <menu type="context" id="popup-menu">
    <menuitem>${opts.op1}</menuitem>
    <menuitem>${opts.op2}</menuitem>
    <hr/>
    <menuitem>${opts.op3}</menuitem>
  </menu>`;

footer.js

export const footer = (data) =>  html`<footer>
  <p>Posted by: ${data.author}</p>
  <p>Contact information: <a href="mailto:${data.email}">${data.email}</a>.</p>
</footer>`;

So you can reuse them in your pages by importing each module. (Yes, I know it's not HTML, it has to be a JavaScript module with export clause, but I think it's pretty convenient and thus you get reusable pieces)

home-page.js

import {menu} from 'menu.js';
import {footer} 'footer.js';
import {html, render} from 'lit-html';

const myData = { .... } // here you have an object with the information you need

const homePage = data => html`
    ${menu(data)}

     <!-- your homePage content here -->

    ${footer(data)}`;

render(homePage(myData), document.body);

I hope I have clarified something. Do you feel OK with this approach?

[Jeff Hilton]

Yes, that’s great. I wasn’t getting that they could be imported and reused that way. I really like the promise of web components and now they seem to be more like first class parts of JavaScript. Thanks for your response and examples. Time to create some sweet new components 😙

[Julio Castillo Anselmi]

Your're welcome! I would like to see those components ;-)