HTML全局属性不能驱动状态管理，仅作静态载体；data-*需全小写连字符命名，dataset为只读快照，修改须用setAttribute；仅id、class、hidden、tabindex等少数属性能触发浏览器行为变化。
HTML全局属性本身不能直接管理页面状态，它们不具备响应式能力或变更通知机制。想靠data-*、hidden或class自动驱动组件重渲染？不行。状态管理必须由JS逻辑控制，全局属性只是被动载体或副作用出口。
为什么 dataset 读出来总是 undefined
根本不是JS写错了，是HTML里属性名不合法，浏览器压根没解析成data-*属性。
-
data-userId、data_user_id、data-UserID全部无效 —— 只有全小写 + 连字符才被识别，比如data-user-id -
data-user-id→ JS中读作element.dataset.userId（自动转驼峰） - 数字开头如
data-2024-year，必须用element.dataset["2024Year"]访问，点号语法会报错 - 后端模板拼了
data-user_id，前端dataset.userId永远是undefined
dataset.xxx = "value" 看似生效，其实没改 DOM
dataset是只读快照，不是双向绑定。它只在元素初始化时映射一次data-*的初始值。
-
el.dataset.foo = "new"后，el.getAttribute('data-foo')仍返回旧值 - 真正写入DOM的唯一方式：
el.setAttribute('data-foo', 'value') - 删除必须用
el.removeAttribute('data-foo')，delete el.dataset.foo完全无效 - 混用会导致缓存不一致：先赋值
dataset.foo，再setAttribute，后续读dataset.foo还是旧值
哪些全局属性真能触发浏览器行为变化
只有极少数全局属性变更会同步影响布局、焦点流或可访问性树，框架才可能基于此做响应。
立即学习“前端免费学习笔记（深入）”；
-
hidden：布尔属性，存在即隐藏，删掉就显示；但旧版Safari/IE需fallback到style.display = 'none' -
class：变更最稳定，推荐用element.classList.toggle('loading')而非直接操作className -
contenteditable：内容变不会发input事件，必须手动监听input或blur才能同步状态 -
id、lang、title等不影响渲染，只服务辅助技术或SEO，别指望它们驱动UI更新
data-* 存 JSON 的典型翻车现场
可以存，但必须手动序列化/解析，且极易因格式或安全问题崩掉。
- 写入时必须用
JSON.stringify()，别直接塞对象字面量 - 读取时必须
try/catch包裹JSON.parse()，否则data-config='{"theme":}'这种坏JSON会让整个组件初始化失败 -
data-config='{"user":{"id":1024}}'→JSON.parse(el.dataset.config).user.id得到的是字符串"1024"，不是数字 - 敏感数据（token、密码、用户偏好）严禁走
data-*，XSS风险极高
真正参与状态驱动渲染的原生入口极少：id、class、hidden、tabindex—— 它们变更会触发重绘或焦点流变化。其他全局属性，包括所有data-*，都只是静态上下文容器，别高估它的能力。
