lit-html

捕获事件 { handleEvent: () => {}, capture: true }

不能渲染动态 tag // https://github.com/Polymer/lit-html/issues/78

// 可以使用静态表达式来完成，先填充得到模版

将带数据的 HTML 模板字符串渲染成 DOM，没有组件的概念

和直接渲染的区别是寻找了一种最少更新 DOM 的途径

// 每次 render 进行对应 node 或者属性的修改

// 一些对 DOM 相同值的操作浏览器不会认为修改，但是 prop 尽管值相同也会被认为修改：

https://codesandbox.io/s/lit-html-props-set-1pite

// 有副作用的原生 prop （如 video.srcObject）应该使用 guard 指令

render(html`<h1>${Date.now()}</h1>`, document.body)

`<input
    class=${class}
    .prop=${prop}
    ?autofocus
    @change=${onChange} // onclick 需要在 window 监听
/>`

渲染列表，优化插入列表项：

repeat(employees, (employee) => employee.id, (employee) =>
        html`<li>${employee.familyName}, ${employee.givenName}</li>`)
// https://github.com/Polymer/lit-html/blob/9bdf622e1aaaf7f82ccf9d19989a3bd7c13febba/src/directives/repeat.ts

自己 de 实现：

API 一致，`html` 解析模版，`render` 实例化、挂载和更新 DOM

解析成 vDOM
将 vDOM 实例化成 DOM
根据映射关系设置 attr, prop, listener
插入 host
再次调用 `render` 时，判断 host 内容是否是模版的实例

已经是模版实例
模版相同时执行 3
模版不相同则执行 1～4
不是模版实例则执行 1～4

添加一个模版命令，有值渲染值，无值不渲染属性：

!pattern=${pattern}

渲染动态属性：

<div ${{}}></div>