<p>data-* 属性仅用于组件挂载前传递静态字符串，非响应式状态管理工具；读取用 dataset.xxx，写入必须用 setAttribute，customElements 中需通过 observedAttributes 和生命周期钩子监听 DOM 属性变更。</p>
data-* 属性不是数据管理工具，只是初始化参数的“信封”
直接用 data-user-id 或 dataset.userId 管理组件数据，一定会掉进类型错判、DOM 不同步、状态不响应的坑里。浏览器从不把 data-* 当成状态源——改了属性值，不会触发重渲染；JS 改了 dataset.userId = "42"，getAttribute("data-user-id") 还是旧值；你甚至不能靠它实现布尔判断：Boolean(el.dataset.loading) 在 data-loading="false" 时返回 true。
真正能用的场景只有一个：组件挂载前，把一串静态字符串塞进去，供 JS 在 connectedCallback() 或初始化函数里读取一次。它不持续、不响应、不联动。
写对名字才能读到，连字符和大小写必须严格匹配
写成 data-userId、data_user_id、data-UserID，浏览器全部静默忽略——DevTools 里都看不到，dataset.userId 必然 undefined。只有全小写 + 连字符才被识别：
-
data-user-id→el.dataset.userId -
data-api-url→el.dataset.apiUrl -
data-2024-report→ 必须用el.dataset["2024Report"]（点号语法非法）
后端模板或框架渲染时若混用下划线或驼峰，前端永远取不到值，别怪 JS 不工作，先查 HTML 源码里属性名拼对没。
立即学习“前端免费学习笔记（深入）”；
读写必须分清 API：dataset 只读，setAttribute 才真写入
dataset 是只读快照，不是双向绑定代理。以下操作全是错的：
-
el.dataset.count = "5"—— DOM 属性没变，下次getAttribute("data-count")还是旧值 -
delete el.dataset.active—— 不会删掉属性，getAttribute("data-active")仍存在 - 混用：先
dataset.foo = "a"，再setAttribute("data-foo", "b")，之后dataset.foo还是"a"，缓存已脱节
正确姿势：
- 读：优先用
el.dataset.xxx（语义清晰、自动驼峰） - 写：必须用
el.setAttribute("data-xxx", "value") - 删：用
el.removeAttribute("data-xxx") - 判断是否存在：先
"xxx" in el.dataset，再取值，避免undefined报错
在 customElements 中可控使用 data-* 的最小可行路径
想让 data-* “参与数据流”，唯一可靠路径是配合 customElements.define() 和生命周期钩子：
- 声明监听：在类上写
static get observedAttributes() { return ["user-id", "theme"]; }（注意不是data-user-id） - 首次读值：在
connectedCallback()中调this.getAttribute("user-id")或this.dataset.userId，此时 DOM 就绪 - 响应变更：在
attributeChangedCallback(name, oldValue, newValue)里手动转类型、更新内部状态、调this.render() - 别在
constructor()里操作this.innerHTML或查this.shadowRoot—— 子节点还没解析，必出错
所有值仍是字符串：data-is-pending="false" 要写成 this.dataset.isPending === "true"；data-config='{"theme":"dark"}' 必须 try/catch 包裹 JSON.parse()；数字要显式转：parseInt(this.dataset.delay, 10)。
最易被忽略的一点：observedAttributes 声明后，attributeChangedCallback 只对属性变更生效，对 JS 直接改 this.dataset.xxx 完全无感——它监听的是 DOM 属性变化，不是 dataset 对象赋值。
