details标签需严格遵循DOM结构规范，summary必须为首个直接子元素；自定义箭头须用summary::before清除原生标记；JS控制必须操作open属性而非display；收起时需手动暂停媒体与脚本。
details 标签本身不带“精美”效果，所有视觉提升都靠 CSS 重写，且必须绕过浏览器默认行为才能稳定生效——直接改 ::marker 或加 display: inline-block 到 summary，大概率让 Safari 点击失灵、箭头错位、键盘操作无效。
summary 必须是 details 的第一个子元素，空格和注释都不行
DOM 结构稍有偏差，details 就会退化为普通容器：点击无响应、toggle 事件不触发、屏幕阅读器无法识别。这不是样式问题，是解析失败。
- ✅ 正确：
<details><summary>标题</summary><p>内容</p></details> - ❌ 错误：
<details><!-- 注释 --><summary>标题</summary></details>（注释是文本节点） - ❌ 错误：
<details><div><summary>标题</summary></div><p>内容</p></details>（summary不是直接子元素）
自定义箭头只能用 summary::before，别碰 ::marker
::marker 在 Safari ≤15.6、部分 Edge 和老 Firefox 中完全不渲染；::-webkit-details-marker 只对 WebKit 有效。跨浏览器唯一可靠路径是清掉原生标记，再用伪元素注入图标。
- 先清除默认：
summary { list-style: none; } - 再注入图标：
summary::before { content: "▶"; margin-right: 6px; transition: transform .2s; } - 展开时旋转：
details[open] > summary::before { transform: rotate(90deg); } - ⚠️ 别给
summary设display: inline-block或float，会缩小点击热区，触屏点不中
JS 控制必须操作 open 属性，不是 style.display
设 el.style.display = 'none' 表面看隐藏了内容，但绕过了浏览器状态管理：屏幕阅读器读不出当前状态、toggle 事件不触发、键盘 Space/Enter 失效。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确切换：
el.open = !el.open或el.toggleAttribute('open') - ✅ 监听变化：
el.addEventListener('toggle', () => console.log(el.open)) - ❌ 错误写法：
el.style.display = el.open ? 'block' : 'none' - iOS Safari ≤15.4 对 JS 设置
open有延迟，建议兜底：if ('open' in el && !el.hasAttribute('open')) el.open = false
折叠后的内容仍在运行，媒体与脚本要手动暂停
details 只控制显隐，不暂停内部逻辑。收起时 <video autoplay> 依然播放，<iframe> 继续加载，定时器照常执行。
- 监听
toggle事件，在收起时手动暂停：if (!e.target.open) { e.target.querySelector('video')?.pause(); } - 展开时恢复播放或重新初始化懒加载内容
- 嵌套
details不推荐——多数浏览器不支持多级原生折叠，应改用 JS 实现
最易被忽略的是：新闻块里如果含 <img loading="lazy"> 或第三方广告脚本，收起后仍会触发加载和执行。这不仅浪费带宽，还可能造成用户感知卡顿。必须在 toggle 回调里做清理，不能只依赖 CSS 隐藏。
