data-*属性仅用于初始化传参，不响应变化、不触发重绘；应转为组件内部状态管理，hidden/class才是可靠视图更新通道；监听变更须用customelements+attributechangedcallback。
别把 data-* 当状态源用，它不响应、不触发重绘，硬绑只会让组件变脆、出错难定位。
data-* 属性只该用于初始化传参
浏览器不会监听 data-user-id 的变化，JS 读取它得到的永远是字符串，且 DOM 挂载前访问 this.dataset.id 是 undefined。
- 结构化参数（如
data-config='{"theme":"dark"}'）必须用el.getAttribute('data-config')+try/catch解析，不能直接JSON.parse(el.dataset.config) - 简单值（如
data-theme="dark"）挂载后立刻转类型存进组件内部state.theme = el.dataset.theme === 'dark'，后续只读 state - SSR 渲染时避免动态生成
data-值——服务端和客户端初始值不一致，框架 diff 会丢状态
hidden 和 class 才是驱动视图更新的可靠通道
hidden 和 class 是仅有的几个浏览器原生支持“属性变更 → 视图重绘”的全局属性，它们不存状态，但能稳定触发 UI 变化。
- 显隐控制统一用
el.hidden = true/false，别用setAttribute('hidden', '')—— property 和 attribute 容易不同步 - 多状态 UI（loading/success/error）必须用
el.classList.toggle('state-loading')，比拼接className安全，且能触发 CSS 重绘 - 别用
title或lang控制显示逻辑——它们只影响辅助技术，不触发重绘
想监听 data- 变更？必须走 customElements + attributeChangedCallback
原生 <div> 加了 <code>data-count，浏览器根本不会通知 JS “它变了”。唯一可控路径是自定义元素。
- 在
observedAttributes里声明要监听的data-名，如['data-count', 'data-config'] - 在
attributeChangedCallback(attr, oldVal, newVal)里做类型转换和状态同步，newVal仍是字符串 - 注意：首次挂载时也会触发该回调，需判断
oldVal === null来区分初始化 vs 更新
真正容易被忽略的是：你写的 data- 值是否在 SSR 和 CSR 间保持一致；以及，哪怕用了 customElements，attributeChangedCallback 里不做防抖或节流，高频变更照样拖垮渲染帧率。
