HTML模板不保存状态，需用JS读写localStorage实现持久化：渲染前读取并注入DOM，操作后存回；Go模板中checkbox需用{{if .IsChecked}}checked{{end}}；data-id须静态且语义化；Shadow DOM重绘会清空状态，需手动保存恢复。
HTML模板本身不保存状态，必须靠JS显式读写localStorage
HTML模板（<template></template>）只是惰性容器，渲染后生成的节点和原始模板完全无关。模板里写的checked、value、open等属性，在页面加载时只起初始作用，刷新即丢。所谓“持久化”，实际是：在模板渲染前读取localStorage，再把值注入到生成的DOM中；用户操作后再把新值存回去。
Go模板中checkbox状态必须用{{if .IsChecked}}checked{{end}}
Go的html/template不会自动把布尔值转成checked属性——它只做字符串插值。直接写checked="{{.IsChecked}}"会输出checked="true"，而浏览器只认checked这个属性是否存在，不管值是什么。
-
type="checkbox"不能写在<label></label>上，必须属于<input>标签 - 后端要传入明确的布尔字段（如
IsChecked bool），而不是靠前端猜 - 模板里只控制属性存在与否：
<input type="checkbox" .ischecked> - 不要依赖
value判断是否勾选——input.checked才是唯一可靠依据
动态渲染组件时，data-id必须静态写死，不能靠JS生成
如果模板每次渲染都生成新ID（比如用Date.now()或Math.random()），localStorage里存的"cell-12345"就永远匹配不上下次渲染出的"cell-67890"。状态看似存了，实则断链。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用语义化静态ID：
data-id="theme-dark"、data-id="task-42"，而非data-id="item-{{.ID}}"（除非.ID本身稳定不变） - 避免用
id属性——组件复用时容易冲突；data-id才是安全选择 - 若模板由后端生成，确保
data-id在服务端就确定，不依赖客户端时间或随机数 - 渲染后立即遍历
document.querySelectorAll('[data-id]')并同步状态，别等DOMContentLoaded——此时DOM已就绪，但可能晚于某些异步模板插入
Shadow DOM组件里改shadowRoot.innerHTML会清空所有状态
哪怕只是改一个class或theme，只要重设shadowRoot.innerHTML，input的value、details的open、滚动位置全归零。这不是bug，是浏览器标准行为：销毁旧树，重建新树。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用
DocumentFragment局部更新，或用lit-html这类支持diff的库 - 关键状态（如表单值）必须在重绘前手动读出，重绘后再手动设回
- 宿主元素应暴露属性（如
data-expanded），让外部控制状态，而不是藏在shadow内部 - 别在
connectedCallback里直接读localStorage并写shadowRoot.innerHTML——此时shadowRoot虽存在，但子节点可能还没挂载完成；建议用requestAnimationFrame延迟一帧
