data-* 是唯一标准认可的自定义属性机制，但仅作字符串容器，不自动绑定、响应或同步；所有交互需 js 手动实现，包括类型转换、dom 更新与 ui 重绘。
HTML 没有“全局属性实现自定义数据绑定”这回事。data-* 是唯一被标准认可的自定义属性机制，但它本身不绑定、不响应、不自动同步——它只是字符串容器，所有“绑定感”都靠 JS 手动桥接。
为什么 data-* 不是绑定，只是入口
写 <button data-loading="true"></button>，浏览器不会因此禁用按钮或变灰；this.dataset.loading 拿到的永远是字符串 "true"，不是布尔值 true；CSS 里写 [data-loading="true"] 能匹配样式，但 JS 改了这个属性，UI 不会自动重绘——除非你主动触发逻辑。
- 属性值恒为字符串：哪怕写
data-count="42"，parseInt(this.dataset.count)才能得到数字 - dataset 是只读映射：赋值
this.dataset.loading = "false"不会更新 DOM，也不会触发 CSS 重匹配 - 首次渲染后修改
setAttribute("data-loading", "false")，样式会变，但 JS 状态仍需手动同步
dataset 和 getAttribute 到底怎么选
二者行为不同，混用容易出错：
- 读取静态初始值（如 SSR 输出、框架首次渲染）→ 用
getAttribute("data-user-id")，它不依赖 DOM 解析阶段，更稳定 - 属性名含数字开头（如
data-2024-active）→dataset["2024Active"]可读，dataset.2024Active语法错误 - 需要原始字符串（比如带空格、JSON 字符串未解析）→
getAttribute直接返回，dataset会尝试驼峰转换并丢弃结构 - 写入必须用
setAttribute("data-user-id", "1024")，dataset.userId = "1024"不会持久化到 DOM
监听 data-* 变更必须配 customElements.define()
原生 HTML 元素不支持监听 data-* 变更；只有自定义元素能通过 observedAttributes + attributeChangedCallback 做响应式处理，但注意规则：
-
observedAttributes必须返回裸属性名：想监听data-disabled，得写['disabled']，不是['data-disabled'] - 回调中
name参数是去掉data-后的小写连字符形式，如'user-id'，不是驼峰 - 首次从 HTML 解析时也会触发该回调，
oldValue为null，需判空 - 类型转换不能省：
newValue === 'true'判断布尔，parseInt(newValue, 10)转数字，别信隐式转换
真正容易被忽略的点：时机与所有权
很多人在 constructor() 里就操作 this.dataset 或写 this.innerHTML，结果子节点读不到、样式没生效、事件监听器丢失——因为此时 DOM 还没挂载，dataset 虽可读，但上下文不可靠。
初始化映射最安全的位置是 connectedCallback()；若要响应后续变更，才加 observedAttributes；而所有状态驱动的 UI 更新，必须由你显式调用 render() 或类似逻辑，没有自动 diff，也没有响应式代理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
