details标签默认不支持按需加载，需监听toggle事件并在open为true时用fetch加载HTML片段，通过DOMParser或insertAdjacentHTML安全插入，缓存结果避免重复请求，并处理兼容性与无障碍问题。
details标签默认不支持按需加载，必须手动监听open事件
原生 <details> 展开时不会触发任何资源加载行为，内容在 HTML 中已存在就立刻渲染，不存在也不会自动请求。想实现“点开才加载”，得靠 JS 监听 toggle 事件或 open 属性变化，再发起请求。
注意：不要用 click 监听 <summary>，它无法捕获键盘展开（如空格/回车），也不反映实际展开状态；应该监听 toggle 事件，它在用户交互导致 open 状态切换时触发。
- 监听
toggle后检查event.target.open === true，只在真正展开时加载 - 加载前给
<details>加disabled或 loading class，避免重复点击 - 加载完成后把 HTML 插入
<details>内部（不是替换整个标签）
用fetch加载HTML片段并插入details内部要避开innerHTML陷阱
直接 element.innerHTML = responseText 可能执行内联脚本、触发图片加载、丢失事件绑定。如果后端返回的是纯结构片段（比如只有 <p><img></p>），建议用 DOMParser 解析后再 append，或用 insertAdjacentHTML('beforeend', ...) 控制插入位置。
更稳妥的做法是：先清空 <details> 的子节点（排除 <summary>），再将新内容逐个 appendChild。这样能确保事件监听器不被意外销毁，也避免重复解析。
立即学习“前端免费学习笔记（深入）”；
- 用
detailsElement.querySelectorAll(':scope > *:not(summary)')安全定位非 summary 子元素 - 后端返回的 HTML 片段里不要包含
<script>，如有动态逻辑，统一由 JS 模块化管理 - 如果内容含图片，可加
loading="lazy"属性，但注意 Safari 对 details 内 lazy 图片支持不稳定
多次展开同一details时应缓存内容，避免重复请求
用户可能反复展开收起，每次重请求既浪费带宽又影响体验。最简方案是加载成功后，在 <details> 上挂一个自定义属性（如 data-loaded="true"），下次 toggle 时先检查该标记。
更进一步，可以将加载结果缓存到 Map 或 WeakMap 中，key 为 detailsElement，value 为 Promise 或 DOMFragment，这样还能支持并发点击去重。
- 用
detailsElement.dataset.loaded判断是否已加载，简单直接 - 若内容会随时间更新（如日志流），可加时间戳参数或 ETag 头做条件请求
- 不要用 localStorage 缓存 HTML 片段——容易过期且无意义地增大存储
兼容性与无障碍要点不能只靠details原生行为
<details> 在 IE 中完全不支持，Safari 15.4 之前对 toggle 事件支持有 bug（不触发）。需要降级方案：检测 HTMLDetailsElement 构造函数是否存在，不存在则用 div + JS 模拟展开收起，并手动维护 ARIA 属性。
无障碍方面，原生 <details> 已自带 aria-expanded 和角色语义，但如果你替换了内部结构，必须手动同步更新 aria-expanded 和 aria-hidden（对收起状态下的内容）。
- 用
detailsElement.hasAttribute('open')而不是detailsElement.open判断初始状态，避免 JS 初始化干扰 - 键盘操作（Tab → Space/Enter）必须可用，不能只依赖鼠标
- 加载中状态建议加
aria-busy="true"和视觉 loading 提示，否则屏幕阅读器可能误读为空白
