lit-html 源码
因为 lit-html 更新 dom 使用的方式和 virtual dom 不一样，所以，简单实现一下 lit-html。
在线 Demo
lit-html 对外暴露一个 html 字符串模板函数，并使用 render 函数渲染。
https://zhoukekestar.github.io/toy-lit-html/index.html
<script type="module">
import { html, render } from './lit.js';
const helloTemplate = (name1, name2) => html`
<div>hi ${name1} !</div>
<div>hello ${name2} ?</div>
`
render(helloTemplate('foo', 'bar'), document.body)
window.onclick = () => {
render(helloTemplate('jucy' + Math.random(), 'bob'), document.body)
}
</script>
效果
首次渲染为 foo、bar，然后点击页面，渲染 jucy、bob，且仅更新对应的 text 节点。
再次多次点击，bob 由于没有更新相关的值，所以后续的每次更新，bob 节点都无变化。
Execute flow
真实的 lit-html 大致执行顺序。