html 中 data-* 属性仅为字符串容器，无法自动绑定列表；需手动解析 json、处理异常，并用 getattribute 替代 dataset 以避免驼峰转换陷阱，真正“绑定”须由 js 主动实现。
HTML 里没有“data 属性列表数据绑定”这回事。data-* 是字符串容器，不是绑定机制；所谓“列表绑定”，本质是用 dataset 或 getAttribute 手动读取、转换、映射到 JS 数组或对象，再由你控制渲染和更新。
data-* 不能自动变成数组，必须手动解析
写 <div data-items='["a","b","c"]'>，<code>this.dataset.items 拿到的只是字符串 "["a","b","c"]"，不是数组。浏览器不解析 JSON，也不报错——静默失败最危险。
- 必须显式调用
JSON.parse(this.dataset.items)，且加try/catch防止格式错误 - 服务端渲染（SSR）或模板引擎输出时，若未转义引号或换行，
JSON.parse直接抛错 - 空格、前导零、
null字符串等都会导致解析失败，getAttribute('data-items')比dataset.items更可控，因它不自动 trim 或转换命名
list 属性和 datalist 不是 data-*，别混用
list 是 <input> 的原生属性，只用于指向 <datalist></datalist> 提供下拉建议，和 data-* 完全无关。它不传递数据、不触发事件、不支持动态更新列表内容。
-
list="xxx"的值必须与<datalist id="xxx"></datalist>的id严格一致（区分大小写） - 仅
type="text"、"search"、"email"等少数类型支持，type="number"或"password"会直接忽略list -
<datalist></datalist>中的<option></option>只影响 UI 补全，用户仍可自由输入任意值，无法做校验或强制选择
用 dataset 读取列表类 data 属性时，驼峰转换规则容易踩坑
data-user-list → dataset.userList，但 data-users-list-2024 → dataset.usersList2024（数字不打断驼峰），而 data-user_list → dataset.user_list 为 undefined，必须用 getAttribute('data-user_list')。
- 连字符（-）是唯一被 dataset 自动转换的分隔符，下划线（_）、大写字母、数字开头均不识别
- 动态 key 场景（如循环生成
data-item-0、data-item-1）不能用dataset['item-0']，得用getAttribute('data-item-0') - IE11 支持 dataset，但旧版 Edge 对含数字的驼峰名支持不稳定，生产环境建议统一走
getAttribute
真正要实现“列表绑定”，得靠 JS 主动桥接
所谓绑定，是你自己写逻辑：监听点击 → 从 target.closest('[data-id]') 拿属性 → 解析 JSON → 更新本地数组 → 调用 render 函数重绘 DOM。浏览器不帮你做中间任何一环。
- 事件委托中，
event.target很可能不是带 data 属性的元素（比如点的是按钮里的图标），必须用event.target.closest('[data-id]')向上找 - 高频操作（如表格滚动中反复读取）务必提前缓存目标元素，避免每次触发都查 DOM
- 修改
dataset不会触发 CSS 重匹配或 Vue/React 响应式更新，UI 不会自动变——你得手动同步状态并调用更新函数
最常被忽略的一点：data-* 属性在 SSR 输出后就固定了，后续 JS 修改它，只改 DOM 属性，不会反向同步到框架响应式系统或模块变量里。一旦你 mix 了 data-* 和 useState / this.data，很快就会出现“DOM 显示 A，JS 逻辑用 B”的撕裂状态。
