Lit组件需三步正确：用html写模板、@property()声明响应式字段、static styles=css定义样式；插值须避免undefined/null，数组对象更新需替换引用，Shadow DOM隔离样式需在static styles中定义，事件处理器需绑定this。
直接用 html 函数写模板、用 @property() 声明字段、用 static styles = css`` 写样式，这三步做对了，Lit 组件就能跑起来——但绝大多数报错和样式失效，都卡在这三处的细节上。
为什么 render() 里用 html`` 却报 “not a valid child” 错误
根本原因是插值返回了非法类型：Lit 只接受文本、数字、布尔值、nothing 或另一个 html 调用结果。一旦你写了 ${user?.name}，而 user 是 null 或 undefined，插值就变成 undefined，触发错误。
- 别写
${data && data.title}—— 返回false或undefined都不合法 - 改用条件渲染：
${data ? html`<h2>${data.title}</h2>` : nothing} - 字符串拼接必须兜底：
${(name ?? '').trim()}，避免传入undefined导致 class="undefined" - 数组映射时，确保每个 item 都是可渲染值：
${items.map(i => i?.label ? html`<span>${i.label}</span>` : nothing)}
为什么改了 this.count，页面却不更新
Lit 不会自动监听任意字段变更，只响应 @property()（或 static properties）声明过的字段。没声明，再改也没用；声明了但用了不可赋值的对象，同样不触发更新。
- 必须显式声明：
@property({ type: Number }) count = 0;，不能只写count = 0; - 数组/对象要换引用：
this.items = [...this.items, newItem]，而不是this.items.push(...) - 自定义类或 Date 类型需指定对比逻辑：
@property({ hasChanged: (a, b) => a?.getTime() !== b?.getTime() }) date; - 只读属性（
readonly）、私有字段（#field）不会被响应式系统捕获
为什么组件里写的 class="btn" 样式完全不生效
因为 Lit 默认启用 Shadow DOM，外部样式表和全局 class 名无法穿透进来。你看到的 DOM 结构里确实有 class="btn"，但它在 shadow root 下，CSS 作用域已隔离。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 所有样式必须进
static styles = css``，且css必须从'lit'（不是'lit-html'）导入 - 想影响子元素，得用
::slotted(*)或:host .inner，不能靠父级传 class - 调试时右键检查元素 → 查看是否在
#shadow-root (open)下，再点开里面有没有<style></style>标签 - 如果要用全局主题变量，得靠 CSS 自定义属性：
color: var(--primary-color);，并在顶层注入
为什么 @click=${this.handleClick} 里 this 是 undefined
这不是语法糖，而是 Lit 将函数包装成代理处理器。它不会自动绑定 this，和原生 addEventListener 行为一致。
- 必须手动绑定：
@click=${this.handleClick.bind(this)}，或在 constructor 里提前绑定 - 更推荐箭头函数写法：
handleClick = () => { console.log(this.count); } - 事件对象
e是原生Event实例，e.target是 DOM 元素，不是 Lit 组件实例；要用this访问组件状态 - 别在模板里调用带副作用的函数：
@click=${() => this.doSomething()}，应提取为独立方法便于测试和复用
最容易被忽略的是：Lit 的响应式更新只发生在属性赋值那一刻，不是“值变了就更新”，而是“你给一个被声明为 @property 的字段赋了新值，它才触发”。很多人卡在对象内部字段变化却没重赋值，或者用了 Object.assign 原地修改却忘了替换引用。
