HTML模板不处理状态同步，需JavaScript显式控制；data-*仅用于传递简单初始值，结构化数据须用getAttribute+JSON.parse并加try/catch；hidden/class是可靠视图更新通道；模块同步推荐data-sync-group+CustomEvent。
HTML模板本身不处理状态同步——它只是静态结构，所有同步逻辑必须由JavaScript显式控制。靠data-属性自动响应变更、或指望innerHTML更新后视图自动联动，都会失败。
data-* 属性只适合初始化传参，不能当状态源用
常见错误现象：data-count="10被dataset.count读成字符串，后续dataset.count + 1变成"101"；data-config='{"sort":"date"}'直接JSON.parse()没加try/catch，解析失败整个脚本中断。
- 仅用
data-传递简单、不可变的初始值，比如data-theme="dark"、data-root-id="123" - 组件挂载后立刻把
dataset转成对应类型存入内部状态，不要反复读dataset - 结构化数据一律用
el.getAttribute('data-config')取原始字符串，再try { JSON.parse(...) } catch (e) { ... } - 避免在SSR模板里动态生成
data-值——服务端和客户端初始值不一致时，框架diff会丢状态
hidden 和 class 是唯一能可靠触发视图更新的输出通道
hidden和class是少数几个浏览器原生支持“属性变更 → 视图重绘”的全局属性。它们不是数据容器，但能稳定驱动UI变化。
- 显隐控制用
el.hidden = true/false，别用setAttribute('hidden', '')——property和attribute容易不同步 - 多状态（如
loading/success/error）统一走el.classList.toggle('state-loading')，配合CSS命名空间如.tree-node.state-loading .spinner -
id、tabindex虽能影响行为，但语义受限，不适合承载业务状态；title或lang根本不触发重绘，只服务辅助技术
用 data-sync-group + CustomEvent 实现模块级手动同步
没有框架时，最可控的同步方式是：变更元素触发自定义事件，同组其他元素监听并响应。比轮询或MutationObserver更精准，也比双向绑定更易调试。
立即学习“前端免费学习笔记（深入）”；
- 给需要联动的元素统一加
data-sync-group="user-profile"，比如<input id="name">、<span id="preview-name"> - 变更时用
el.dispatchEvent(new CustomEvent('sync:update', { detail: { field: 'name', value: el.value } })) - 监听侧通过
event.target.closest('[data-sync-group]').dataset.syncGroup匹配分组，再批量更新 - 避免用
data-module这类泛化命名，JS查询时容易误匹配；也不要在data-sync-group里塞JSON
真正难的不是写同步逻辑，而是区分哪些该由HTML声明（如data-sync-group）、哪些必须由JS执行（如dispatchEvent）、哪些只能靠class或hidden落地——三者边界模糊时，状态就会漂移。
