142. lit-html 1 - tagged templates

根据lit-html 官网,

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字符串。

测试中不含异常数据。