data-*属性不能直接用dataset读取，因dataset仅映射合法命名（连字符转驼峰、全小写），非标准名需getAttribute()；toggle事件中应查el.open并手动同步data属性以实现状态联动。
data-* 属性不能直接用 dataset 读取 details 元素的自定义属性
details 元素本身支持 data-* 自定义属性，但 dataset 对象只映射标准 HTML5 data 属性名规则：连字符转驼峰、忽略前缀。比如 data-user-id → el.dataset.userId，但若你写成 data-details-id 或 data-open-label，只要命名合法，它就能被读到——问题不在标签类型，而在拼写和大小写是否匹配。
常见错误是误以为 details 有特殊限制，其实它和 div 一样；真正踩坑的是：
-
dataset不支持大写字母开头的 key（data-MyId→el.dataset.myid，不是myId） - 带多个连字符时，每个都转首字母大写（
data-api-key-token→el.dataset.apiKeyToken） - 如果属性是动态插入的（如 JS 后续
setAttribute('data-loaded', 'true')），dataset会立即反映，无需刷新
用 getAttribute() 读取更稳妥，尤其处理非标准命名或含特殊符号
当你的自定义属性名不遵守 data-* 命名惯例（比如用了下划线 data_user_role），或需要精确比对原始字符串（含空格、大小写敏感），getAttribute() 是唯一可靠方式。
例如：<details data_user_role="admin" data-config='{ "theme": "dark" }'>
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
el.getAttribute('data_user_role')返回"admin"；el.dataset.userRole返回undefined -
el.getAttribute('data-config')可直接传给JSON.parse()；而dataset.config会把花括号当成普通字符串，不自动解析 - 注意：如果属性值是空字符串或
null，getAttribute()返回null，不是空串
监听 toggle 事件时，如何结合自定义属性做状态响应
details 的 toggle 事件在用户点击 summary 或通过 JS 触发状态切换时触发，但它不带参数。要区分“开”还是“关”，得查 el.open 布尔值，再结合自定义属性做逻辑分支。
典型场景：一个 FAQ 列表，每个 details 带 data-question-id 和 data-analytics-category，点击展开时上报埋点：
document.querySelectorAll('details').forEach(el => {
el.addEventListener('toggle', () => {
if (el.open) {
const id = el.getAttribute('data-question-id');
const category = el.getAttribute('data-analytics-category');
console.log(`展开问题 ${id}，分类：${category}`);
// 发送埋点
}
});
});- 不要在
toggle里调preventDefault()—— 它没有默认行为可阻止，调了反而可能干扰屏幕阅读器 -
el.open是实时值，比检查hasAttribute('open')更准确（后者在 JS 设置后可能滞后） - 如果页面有多个
details需手风琴效果（一次只开一个），自定义属性如data-group="faq"可用来筛选同组元素
用 open 属性控制状态时，data-* 属性不会自动更新或同步
open 是原生布尔属性，设置 el.open = true 或 el.setAttribute('open', '') 都能展开，但它们**不会触发任何自定义属性的变更**。也就是说，如果你依赖某个 data-is-open="true" 来驱动 CSS 或 JS 逻辑，这个属性必须手动维护。
- 错误做法：
el.open = true之后，期望el.dataset.isOpen === 'true'—— 实际为undefined - 正确做法：展开后同步写入：
el.setAttribute('data-is-open', 'true')；收起时设为'false'或removeAttribute('data-is-open') - 更干净的方式：用 CSS 伪类
details[open] .trigger控制样式，避免用 JS 操控 data 属性来实现视觉反馈
实际项目中最容易被忽略的，是把 data-* 当作状态镜像来用——它只是静态元数据，不随 open 状态自动刷新。需要状态联动时，要么靠 CSS 选择器，要么靠 JS 显式同步，别指望浏览器替你做映射。
