标签需配合js实现动态加载：监听toggle事件触发fetch，防重复请求与竞态，用documentfragment高效插入内容，并确保无障碍访问。
details 标签本身不支持动态加载，但可作为触发器配合 JS 使用
<details></details> 是纯声明式组件，它不内置 fetch 能力，也不监听数据变化。所谓“动态加载”，实际是用它的 toggle 事件当开关，由 JS 在展开时拉取内容、插入 DOM。关键不是靠标签“自动加载”，而是借它的语义和交互机制做入口。
常见错误是把 <details></details> 当成 React 的 useEffect —— 它不会在 open 属性变化时自动执行逻辑，必须手动监听事件。
- 必须用
addEventListener('toggle', ...)，不能只检查element.open后再操作 DOM - 首次展开后，建议设
dataset.loaded = "true"防止重复请求 - 若内容含脚本或需绑定事件（如按钮点击），插入后要手动初始化，
<details></details>不会帮你执行
toggle 事件里 fetch 内容要防重复和竞态
用户快速点开又收起再点开，可能触发多次 fetch，后发请求先返回，覆盖前一次渲染结果。这不是 UI 问题，是状态错乱。
- 每次请求前生成唯一
requestId，存到detailsEl.dataset.requestId - 在
then()中比对：如果response.requestId !== detailsEl.dataset.requestId，直接 return - 插入内容前先清空旧内容：
detailsEl.querySelector('summary').nextElementSibling?.remove()，避免残留 - 用
queueMicrotask包裹插入逻辑，避开 Safari 等浏览器对open状态读取的微任务延迟
大数据量内容插入时别用 innerHTML +=，改用 documentFragment
直接 detailsEl.innerHTML += htmlString 会导致整个子树重解析：已绑定的事件丢失、滚动位置跳回顶部、图片重载、性能抖动。尤其当内容含表格、列表或自定义组件时，问题立刻暴露。
- 用
const frag = document.createDocumentFragment()构建节点树 - 循环解析 JSON 数据，用
document.createElement和frag.appendChild组装 - 最后一次性
detailsEl.appendChild(frag) - 如果内容含大量文本节点，考虑用
Text对象替代innerHTML字符串拼接，减少 HTML 解析开销
移动端和无障碍要注意 summary 的可点击区域与焦点管理
原生 <summary></summary> 在 iOS Safari 上默认点击热区偏小，部分屏幕阅读器对动态插入内容的 announce 支持不稳定。
- 给
summary加tabindex="0"，确保键盘可聚焦；加role="button"显式声明交互意图 - CSS 中扩大点击区域：
summary { padding: 12px; min-height: 44px; }（满足 WCAG 44×44px 最小触控尺寸） - 动态插入内容后，调用
detailsEl.setAttribute('aria-expanded', 'true')，并用setTimeout(() => summary.focus(), 0)把焦点移到 summary，方便键盘用户继续操作 - 避免在
summary里嵌套<button></button>或另一个<details></details>，会干扰事件冒泡和可访问性树
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
