lit-html 是一个轻量级、高性能的 HTML 模板库，由 Google 的 Polymer 团队开发。它使用 JavaScript 的标签模板字面量（Tagged Template Literals）来定义 HTML 模板。

核心特点：
✅ 零虚拟 DOM — lit-html 直接操作真实 DOM，通过静态分析模板中的静态部分和动态部分，只更新变化的内容。
✅ 极轻量 — 压缩后约 3KB，无框架依赖。
✅ 原生 JS — 纯 JavaScript，无需编译步骤（JSX 需要编译）。
✅ 高效 diff — 使用 <template> 元素和标记位进行精准更新。
✅ 事件绑定 — 支持 @click、@input 等声明式事件绑定。

1. 表达式插入：${expression} — 在模板中插入动态值。
2. 事件绑定：@event=${handler} — 如 @click=${() => alert('hi')}。
3. 属性绑定：.property=${value} — 绑定到 DOM 属性而非 HTML 属性。
4. 布尔属性：?hidden=${condition} — 条件性地添加/移除布尔属性。
5. 嵌套模板：在 ${} 中返回另一个 html\`...\` 调用。
6. 列表渲染：使用 Array.map() 配合嵌套模板。
7. 条件渲染：使用三元表达式或 when() 指令。
8. nothing：返回 nothing 表示不渲染任何内容。

通过 npm 安装：
npm install lit-html

在代码中导入：
import {html, render} from 'lit-html';

CDN 方式（浏览器直接使用）：
import {html, render} from 'https://cdn.jsdelivr.net/npm/lit-html@3/+esm';

基本用法：
const template = (name) => html\`<div>Hello ${name}!</div>\`;
render(template('World'), document.body);

React JSX 需要编译（Babel），使用虚拟 DOM，组件化基于函数和 Hooks。
Vue 模板 需要编译或运行时解析，有自定义指令系统（v-if、v-for 等）。
lit-html 无需编译，纯 JavaScript，使用原生 JS 表达式（map、三元等），无虚拟 DOM 直接更新真实 DOM。

lit-html 的优势在于极简和性能，非常适合需要轻量级模板的场景，如 Web Components、静态站点生成、微前端等。它的学习曲线较低，因为模板语法就是标准 JavaScript。

lit-html 是底层的模板渲染库，专注于高效的 HTML 渲染。
LitElement 是基于 lit-html 构建的 Web Components 基类，提供了声明式属性、生命周期、样式封装等功能。
Lit 是 Google 推出的新一代框架，整合了 lit-html 和 LitElement，是构建 Web Components 的完整解决方案。

简单来说：lit-html 负责渲染，LitElement/Lit 负责组件化。你可以单独使用 lit-html 在任何项目中，也可以使用 Lit 构建完整的 Web Components 应用。

本工具在浏览器沙箱中运行用户代码，已预加载以下全局变量：
html, render, nothing, repeat, when, classMap, styleMap, ifDefined, until, choose, ref, guard, data, preview。

⚠️ 注意：
• 不支持 ES 模块 import 语句，请直接使用全局变量。
• 每次执行在独立作用域中，变量不会跨次共享。
• render() 的目标元素固定为 preview 变量。
• 异步操作（setTimeout 等）在多次执行时可能累积，请注意清理。