And this is where lit-html shines. It’s smart enough to only update the parts of the DOM it needs to.
Here’s a little comparison where some data is changed, then the templates re-rendered. If we innerHTML the whole thing, well, the entire DOM is changed. With lit-html it just changes smaller inner parts.
Here’s a little video where you can see the DOM-updating difference:
There is another project along these lines too. I don’t know quite enough to judge, but it’s a bit older and I believe it’s a bit more robust. It’s called HyperHTML.
HyperHTML also allows you to create templates and render them. And most importantly rerender them efficiently.
Here’s a demo where the data comes from the Quotes on Design API and inserted into a template:
Kinda cool that these mini-libraries exist that do useful things for us, so when situations arise that we want a feature that a big library has, but don’t want to use the whole big library, we got smaller options.