142. lit-html 1 - tagged templates

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

こちらの映像には lit-htmlの働きをわかりやすく説明してあります。公式のサンプルコードを見てみよう。

import {html, render} from 'lit-html'const helloTemplate = (name) => html`<div>Hello ${name}!</div>`// This renders <div>Hello Steve!</div> to the document bodyrender(helloTemplate('Steve'), document.body)// This updates to <div>Hello Kevin!</div>, but only updates the ${name} partrender(helloTemplate('Kevin'), document.body);

二回目のrender()にはマジックが働いて、必要の部分だけ更新されている。

マジックにおいてはBFE.devいくつかの問題が出される予定で、この問題では以下のゴールを達成してください。

上記のサンプルコードが動くよう、html() とrender()を実装してください、ただしrerenderのことは考えなくても良い、つまりhtml() はHTML文字列を返して良いとのことです。

インプットデータは全てvalid。