html表单配置持久化需js主动介入，不能依赖标签自动完成；必须通过localstorage、indexeddb或后端api实现，dataset仅作静态标记，不具持久化能力。
表单配置持久化不是靠 HTML 标签自动完成的
HTML 本身不提供“配置持久化”能力。form、input、select这些标签只负责结构和初始值，刷新后所有用户输入、动态开关状态、折叠/展开项都会清空。所谓“组件化表单配置”，本质是把表单字段、校验规则、默认值、可见性逻辑等抽象成可复用单元，而持久化必须由 JS 主动介入，绑定到 localStorage、IndexedDB 或后端 API。
用 dataset 标记配置但别指望它存状态
data-config-key="user-profile" 这类属性适合标记组件意图（比如告诉 JS “这个表单管用户资料”），但它不是状态容器：修改 element.dataset.configKey = 'new-value' 不会写入 DOM 属性，也不会跨页面保留。真要持久化配置，得把值提取出来再存：
- 读取时统一用
element.getAttribute('data-config-key')，避免dataset缓存错乱 - 配置变更后，立刻调用
localStorage.setItem('form-config-user-profile', JSON.stringify(configObj)) - 不要把整个表单 HTML 字符串塞进
data-属性——体积大、易 XSS、序列化慢
Shadow DOM 组件里表单状态怎么不丢
在自定义元素中用 shadowRoot 渲染表单时，shadowRoot.innerHTML = newHtml 会销毁所有 input 值、滚动位置、焦点。常见错误是属性变更（如 theme）触发全量重绘，导致用户正在填的内容消失。
- 改用
DocumentFragment或lit-html的render()做局部更新，只替换变动节点 - 更新前先读取关键状态：
const value = this.shadowRoot.querySelector('input[name="email"]').value - 渲染后立即恢复：
inputEl.value = savedValue，并手动调用inputEl.setSelectionRange(start, end)（如需光标位置） - 宿主元素上同步设置
this.setAttribute('data-email', value)，方便后续从属性还原
localStorage 存配置时容易踩的坑
存表单配置看着简单，实际常因类型、时机、范围出问题：
-
localStorage只存字符串，JSON.stringify({ required: true, maxLen: 50 })是必须的；读取后必须JSON.parse()，否则config.required === 'true'会判断失败 - 不要在
connectedCallback里直接读localStorage后设置shadowRoot—— 此时 DOM 可能未就绪，应 wrap 在requestAnimationFrame(() => { ... }) - 同一域名下多个表单共用 key 名（如都用
'form-config'）会互相覆盖，建议按组件 ID 区分：`form-config-${this.id}` - 敏感配置（如 API 密钥、用户 token）绝不能存在
localStorage，哪怕加了加密也难防 XSS 窃取
最麻烦的不是存，而是“什么时候存”和“存哪几个字段”——用户改一个下拉框，要不要立刻存？字段依赖其他字段显隐，是否要连带保存关联状态？这些边界必须明确定义，不能靠“反正都存了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
