DEV Community


Discussion on: lit-html templates from zero to hero

julcasans profile image
Julio Castillo Anselmi Author

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.


export const menu = (opts) =>  html`
  <menu type="context" id="popup-menu">


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

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)


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`

     <!-- your homePage content here -->


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

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

newlegendmedia profile image
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 😙

Thread Thread
julcasans profile image
Julio Castillo Anselmi Author

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