HTML中data-*属性需显式监听与解析：customElements须在observedAttributes声明小写连字符名，setAttribute才触发attributeChangedCallback；dataset访问需驼峰命名且值恒为字符串，须手动类型转换；仅适用于初始化参数注入，非响应式数据通道。
HTML组件化开发中，属性传递不是靠data-*自动完成的，而是必须由开发者显式设计：自定义元素用observedAttributes声明监听哪些属性，再通过attributeChangedCallback手动解析；原生元素则靠dataset读取字符串，所有结构化数据都得自己JSON.parse()。
customElements 中如何让 data-* 属性触发响应逻辑
浏览器不会自动监听data-*属性变化——哪怕你写了data-user-id="123"，改了它也不会进attributeChangedCallback。要让它“动起来”，必须同时满足三个硬性条件：
-
observedAttributes静态 getter 中明确列出小写连字符格式的完整属性名，比如['data-user-id', 'data-theme']，不能写'data-*'通配 - 修改必须走 DOM API：
el.setAttribute('data-user-id', '456')才触发回调；el.dataset.userId = '456'完全无效 - 回调里拿到的
newValue永远是字符串，哪怕你塞的是{"id":456}，也得自己JSON.parse(newValue)，否则直接当对象用会报Cannot read property 'id' of undefined
dataset 读取时命名与类型转换的坑
dataset看着方便，但名字和类型全是陷阱：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML里写
data-api-url="/v2"，JS里必须用el.dataset.apiUrl访问——el.dataset.api-url或el.dataset.APIUrl都返回undefined -
el.dataset.active拿到的是字符串"true"，不是布尔值，if (el.dataset.active)对"false"也成立；正确写法是el.dataset.active === "true" -
el.dataset.count是"42"，不是数字42，别用parseInt(el.dataset.count)——万一值是"42px"就截成42；稳妥写法是+el.dataset.count或Number(el.dataset.count)
跨组件传参时 data-* 的适用边界
data-*只适合单页内、组件初始化阶段的参数注入，不是通用数据通道：
立即学习“前端免费学习笔记（深入）”；
- 挂载位置优先选
<html>或<body>，这样document.documentElement.dataset一上来就能读，不依赖 DOM 就绪 - 不要把全局配置塞进某个
<div id="app">里——组件还没挂载时就读不到，或者多个组件重复定义data-api-base导致冲突 - 绝不能指望
data-*跨页面：刷新后全丢，新开标签页也拿不到；想传对象，用sessionStorage；想传简单参数，拼 URL 查询字符串
真正容易被忽略的是：data-*本质就是字符串容器，没有隐式解析、没有类型推断、没有响应式更新。你写的每一行JSON.parse()、每一个=== "true"判断，都是在补这个缺口。
