Lit HTML模板需用html函数包裹，插值中只放文本、数字、布尔值、nothing或html调用结果；响应式字段须加@property()装饰器；事件处理器需绑定this；样式须通过static styles定义。
lit 的 html 模板函数怎么写才不报错
直接用 html 函数写模板时，最常见错误是把普通字符串拼接混进去，比如 html`<div>${'hello' + name}</div>` 看似没问题，但一旦 name 是 undefined 或对象，就会触发“not a valid child”错误。lit 不接受裸 js 表达式返回非渲染类型值。
- 只在插值中放纯文本、数字、布尔值、
nothing或其他html调用结果 - 避免在模板里调用可能返回
null/undefined的函数；改用条件判断：${user ? html`<span>${user.name}</span>` : nothing} - 属性绑定必须用
??或默认值兜底，比如class=${className ?? ''}，否则空值会让属性变成class="undefined"
如何让 lit 组件响应 props 变更并重绘 HTML
lit 默认只对 @property 声明的字段做响应式更新，且要求字段是可赋值的——不能是只读对象或私有属性。你改了 this.user，但没声明 @property() user，HTML 就不会自动刷新。
- 所有需要驱动视图的字段，都得加
@property()装饰器（或static properties = { user: {} }） - 数组/对象变更需用新引用：写
this.items = [...this.items, newItem]，别用this.items.push(newItem) - 如果字段类型特殊（如
Date或自定义类），要显式指定hasChanged对比逻辑，否则浅比较会失效
lit 中事件绑定和原生 HTML 有什么关键区别
lit 的 @ 语法不是语法糖，它绑定的是经过包装的代理事件处理器，不等同于 addEventListener。最常踩的坑是：在模板里写 @click=${this.handleClick}，但 handleClick 里用了 this，却没绑定上下文。
- 方法必须是箭头函数，或在
constructor里手动this.handleClick = this.handleClick.bind(this) -
@keydown=${(e) => this.onKey(e)}是安全的，但别写成@keydown=${this.onKey}后再在方法里访问this.state—— 此时this可能是undefined - 事件对象
e是标准Event实例，但e.target是原生 DOM 元素，不是 lit 组件实例
为什么 render() 返回的 HTML 在 shadow DOM 里样式不生效
lit 默认启用 shadow DOM，但 CSS 作用域隔离后，外部样式表或全局 class 名完全不起作用。你写了 class="btn-primary"，却发现没样式，大概率是因为没把样式打进组件内部。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须用
static styles = css`...`定义样式，并确保css导入自lit（不是lit-html） - 不要指望父级传进来的 class 影响子元素；想透出样式点，得用
:host、::slotted或 CSS 自定义属性 - 调试时可在 DevTools 里检查元素是否真在 shadow root 下，以及
<style></style>标签是否已注入到 shadow DOM 中
lit 简化的是模板与状态同步的机制，不是 HTML 本身；它把“什么时候该重绘”“怎么安全插入动态内容”这些边界条件全收走了，但你也得按它的契约来——比如不绕过 html 直接操作 innerHTML，不手动修改 shadowRoot.innerHTML。
立即学习“前端免费学习笔记（深入）”；
