details标签默认收起，仅含summary时点击才展开；open属性控制初始状态，写即展开、不写即收起；summary必须为首个子元素，支持内联内容但禁用pointer-events:none；toggle事件监听状态变化，兼容chrome12+/firefox49+/safari15.4+。
details 标签默认是关闭状态，summary 点击才展开
<details></details> 渲染出来默认折叠，里面的内容不可见，只有点击 <summary></summary> 区域才会展开。这个行为是浏览器原生支持的，不需要 JS 就能工作——但很多人误以为它“没反应”，其实是没写 <summary></summary>，或者写了但内容为空。
常见错误现象：
– 页面上只看到空白或一行小三角，点不动 → 检查是否漏了 <summary></summary>；
– 点击无反应 → 确认没有用 CSS 把 summary 设为 display: none 或 pointer-events: none；
– 展开后内容错位 → <details></details> 是块级元素，内部若混用行内元素又没处理换行，容易布局断裂。
实操建议：
– 必须包含且仅有一个 <summary></summary> 作为第一个子元素（规范要求）；
– <summary></summary> 内可嵌套任意内联内容，比如 <span></span>、图标 <svg></svg>，甚至带 class 的强调文本；
– 不要把它当按钮用：它不触发 click 事件的冒泡拦截逻辑（除非显式 event.stopPropagation()），但原生 toggle 行为无法被 preventDefault() 阻止。
open 属性控制初始展开状态，但不能用 JS 直接赋值布尔值
加 open 属性会让 <details></details> 初始就展开。但它是个“存在即真”的布尔属性，不是 DOM 属性意义上的 open="true" —— 写成 open="false" 或 open="" 都等效于开启。
实操建议：
– 正确写法：<details open></details>（展开），<details></details>（关闭）；
– JS 控制时，用 element.open = true 或 element.open = false，不要用 element.setAttribute('open', 'true')；
– 修改 open 属性会立即触发动画（如果 CSS 有 transition），但浏览器不保证过渡平滑，尤其在快速连点时可能跳帧；
– 注意兼容性：IE 完全不支持，Edge 12+、Chrome 12+、Firefox 49+、Safari 6+ 支持，移动端 iOS Safari 从 6.1 起支持。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
summary 元素自带小三角，CSS 自定义需重置 appearance
所有支持 <details></details> 的浏览器都会给 <summary></summary> 渲染一个默认折叠/展开指示符（通常是右向小三角）。这个符号不是伪元素，而是 UA 样式通过 appearance: listitem 或类似机制生成的。
实操建议：
– 要隐藏原生三角：必须写 summary { list-style: none; } + summary::marker { content: "" }（Firefox）+ summary::-webkit-details-marker { display: none; }（WebKit）；
– 要替换为自定义图标：推荐用 background-image 或 ::before 伪元素，避免干扰语义；
– 不要用 float 或 flex 强行对齐 summary 文本和图标，容易破坏可访问性（屏幕阅读器依赖原生结构）；
– 如果用了 display: flex 在 summary 上，记得加 align-items: center，否则图标和文字基线不对齐。
details 元素有 toggle 事件，但监听前得确认浏览器支持
<details></details> 元素在用户交互触发展开/收起时，会派发 toggle 事件。这是唯一与该组件生命周期强绑定的原生事件，比监听 click 更准确（例如键盘空格键触发也会触发 toggle）。
实操建议：
– 监听方式：detailsEl.addEventListener('toggle', handler)；
– 注意：该事件不冒泡，也不能取消（event.cancelable === false）；
– handler 中可通过 event.target.open 获取当前状态，比读 DOM 属性更及时；
– Safari 15.4 之前不支持 toggle 事件，需降级用 click + 定时器判断状态变化（不推荐，仅作兼容兜底）；
– 不要在这个事件里执行耗时操作，因为它是同步触发的，卡顿会直接影响交互反馈。
细节上最易被忽略的是可访问性链路：屏幕阅读器依赖 <summary></summary> 的文本作为控件名称，如果里面只有图标没文字，就得补 aria-label 或用 visually-hidden 类包裹说明文字。另外，<details></details> 不自动管理 aria-expanded，需要 JS 手动同步——除非你完全信任 UA 的隐式实现（目前主流浏览器都做了，但测试时别假设它一定存在）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
