3 ms·
<template> is great, but some people are surprised that it doesn't include any form of parameterization or expressions. The entire process of cloning a template
by spankalee 4y ago
<template> is great, but some people are surprised that it doesn't include any form of parameterization or expressions. The entire process of cloning a template and updating it with data is left up to the developer - it's pretty low level.
That's why my team made the lit-html library, which uses JS tagged template literals to make <template> elements for you, clone them and interpolate data where the JS expressions are, and then update the result really, really fast with new data:
import {render, html} from 'https://unpkg.com/lit?module';
let count = 0;
function increment() {
count++;
renderCount();
}
function renderCount() {
render(html`
<p>The count is ${count}</p>
<button @click=${increment}>Increment</button>
`, document.body);
}
renderCount();
You can try that out here: https://lit.dev/playground/#gist=1eff9baed1251fc60dd7da8b7f9f8b4f https://lit.dev/playground/#gist=1eff9baed1251fc60dd7da8b7f9...
We're also working with Apple on a proposal called Template Instantiation which brings interpolations and updates into HTML itself (though the pandemic and things really stalled that work for the moment).
- bugmen0t 4y agoDo you have a link to the template instantiation proposal?
- twsted 4y agoIn the past I've seen this one: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal... Perhaps there are more recent versions. I liked the spirit of the proposal, but never studied it.
- voxal 4y agolit-html is great. I use it for a lot of projects whenever I need some simple tempted HTML. That being said, it seems like the v1 documentation for lit-html [1] has been removed in favor of a single page in the v2 documentation [2]. Is using lit-html standalone not recommended anymore? I really liked using it standalone. [1] https://lit.dev/docs/v1/lit-html/introduction/ https://lit.dev/docs/v1/lit-html/introduction/ [2] https://lit.dev/docs/libraries/standalone-templates/ https://lit.dev/docs/libraries/standalone-templates/
- spankalee 4y agoStandalone use is great and still works fine. The organization of the lit-html and lit-element packages didn't change: they're separate and lit-element depends on lit-html. The only difference is that we added the lit package that rolls them both up and we talk about templating in one place in the docs rather than two (lit-html and lit-element used to have separate sites). We did this because most people used lit-element and the separation was confusing to some and a little bit of rough DX for most.
- wildrhythms 4y agoI use lit-html for front end projects at work and it's a godsend, truly. Being able to keep one central 'state' object and just re-render a template based on that without having to pull in a whole framework, without having to set up a whole webpack build process, is incredible!
- forsakenharmony 4y agoYou can also use preact without a build step via htm https://github.com/developit/htm#installation https://github.com/developit/htm#installation