<p>可通过 element.dataset 获取 HTML 中 data-* 属性，其自动转换短横线为驼峰、值恒为字符串；需用 Object.keys() 遍历，配合 try/catch 解析 JSON，并注意 IE11 降级及自定义元素中 connectedCallback 时机。</p>
反射怎么拿到 HTML 模板里写的 data-* 属性
HTML 模板中写的 data-user-id、data-config 这类属性，不是 DOM 初始化时自动变成 JS 对象字段的——得手动读、手动转、手动挂载。浏览器不帮你做“数据驱动”的桥接，它只管渲染静态结构。
常见错误是直接访问 element.userId 或试图用 JSON.parse(element.dataset.config) 不加判断就执行，结果遇到空值或非法 JSON 就崩。
-
dataset只映射data-开头的属性，且会把短横线转成驼峰（data-api-url→element.dataset.apiUrl） - 值始终是字符串，哪怕写的是
data-count="42"，取出来也是"42"，要转类型得自己来 - 如果属性不存在，
dataset.xxx返回undefined，不是空字符串，别直接JSON.parse
用 Object.keys(element.dataset) 做基础反射循环
想自动提取所有 data- 属性并构造成对象？不能靠 for...in 遍历 dataset，因为它是 DOMStringMap，没有原型链上的可枚举属性；必须用 Object.keys() 或 Array.from(element.dataset)。
注意：dataset 是只读的，你不能通过赋值修改它来触发 UI 更新——它只是快照，不是响应式代理。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 推荐写法：
Object.keys(element.dataset).reduce((acc, key) => { acc[key] = element.dataset[key]; return acc; }, {}) - 如果值含 JSON（比如
data-config='{"theme":"dark"}'），先try/catch再JSON.parse，别假设它一定合法 - IE11 不支持
dataset，需降级用getAttribute('data-config')手动解析
customElements.define 里怎么在 connectedCallback 中触发一次数据同步
自定义元素里，模板中的 data- 属性在 connectedCallback 时才可稳定读取（constructor 里 DOM 还没挂载，dataset 是空的）。但这里读到的只是初始值，后续 HTML 属性变了，dataset 不会自动更新——得监听 attributeChangedCallback。
- 必须在
observedAttributes静态 getter 里声明要监听的data-名，比如return ['data-id', 'data-mode'] - 变更回调里，
newValue仍是字符串，和初始化时一样，需统一做类型转换逻辑 - 别在
attributeChangedCallback里直接操作this.innerHTML，容易引发重入；优先更新内部状态，再调用渲染函数
为什么不用 innerHTML 解析模板字符串里的 data-
有人想从模板字符串（比如后端返回的 HTML 片段）里“反射”出 data- 属性，直接用 innerHTML = str 再读 dataset ——这不可靠。DOM 解析是异步的，且 innerHTML 插入后不会触发 connectedCallback，dataset 可能读不到或读错。
更稳的方式是用 DOMParser 构造文档片段，再查子节点：
const doc = new DOMParser().parseFromString(templateStr, 'text/html'); const el = doc.body.children[0]; const data = Object.fromEntries( Array.from(el.dataset).map(([k, v]) => [k, v]) );
但注意：DOMParser 不执行脚本、不加载资源，也**不解析模板语法**（如 {{value}}），它只当纯 HTML 处理。
真正难的不是读属性，而是决定什么时候读、读完怎么和状态对齐、属性变时 UI 怎么最小化更新——这些没法靠反射自动搞定。
