142. lit-html 1 - tagged templates

According to lit-html homepage,

lit-html lets you write HTML templates in JavaScript, then efficiently render and re-render those templates together with data to create and update DOM

This video explains it pretty well about how it works. Let's take a look at the example.

import {html, render} from 'lit-html'
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`

// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body)

// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);

The magic happens in the second call of render() which only updates the necessary parts.

But there will be a series of problems on BFE.dev leading to that, here you are asked to :

implement html() and render() to make above example work, without considering the rerender, so html() could just return the raw HTML string.

The input data are all valid.