details元素中summary必须为首个子元素，动态插入需确保顺序正确，推荐用append或replaceChildren；toggle事件中需同步open状态与DOM插入，避免交互异常。
details 元素的 contentEditable 属性不生效，别直接往里面写 HTML
直接对 <details> 元素调用 innerHTML = '...' 是可行的，但容易忽略它内部结构的语义约束：浏览器会自动把非 <summary> 的子节点当作「详情内容」，而 <summary> 必须是第一个子元素。如果动态插入时顺序错乱（比如先插内容再插 summary），会导致折叠行为异常或 summary 不可点击。
正确做法是始终确保 <summary> 是首个子节点，其余内容紧随其后：
const details = document.querySelector('details');
details.innerHTML = `
<summary>点击展开</summary>
<p>这是动态加载的内容</p>
<ul><li>条目一</li></ul>
`;
用 append() 或 insertAdjacentElement() 动态追加内容更安全
如果已有 <details> 且含 <summary>，后续只追加详情部分（不碰 summary），推荐用 append() 或 insertAdjacentElement('beforeend', el)，避免重写整个 innerHTML 导致事件丢失或状态重置。
- 必须先确认
<summary>已存在，否则新元素可能被错误地提升为 summary - 不要对
<details>调用appendChild(summary)—— 若 summary 已存在，重复添加会移除原 summary，破坏结构 - 若需插入到 summary 之后、其他内容之前，用
details.insertBefore(newEl, details.children[1])
动态创建并插入 summary 时要特别小心顺序
如果 <details> 初始化时没有 <summary>，你得手动创建并插入——但顺序错了就彻底失效。浏览器只认第一个 <summary> 子元素为控制按钮，后面再多也不起作用。
立即学习“前端免费学习笔记（深入）”；
以下写法是错的：
details.append(contentEl); // 先插内容 details.append(summaryEl); // 后插 summary → summary 不可点击
正确顺序只能是：
details.append(summaryEl); details.append(contentEl);
或者一步到位：
details.replaceChildren(summaryEl, contentEl);
监听 toggle 事件时注意动态内容的 DOM 就绪时机
如果你在 details.toggle 事件后才异步加载内容（比如 fetch 后插入），要注意：用户点开时 open 属性已变为 true，但内容还没渲染，视觉上会“闪一下”或留白。这不是 bug，而是 DOM 插入延迟导致的。
- 建议在插入前先设
details.open = true，再插入内容，避免折叠状态与内容不同步 - 如果内容依赖 JS 初始化（如图表、表格排序），要在
append()后显式触发相关逻辑，不能假设 DOM 加载完自动运行 - 避免在
toggle事件回调里反复插入相同内容，没做去重会不断累加 DOM 节点
