必须是的直接子元素，且前面不能有任何空白或标签；动态更新摘要文本应使用textcontent而非innerhtml；隐藏默认箭头需用::marker清空后自定义::after图标；应监听details的toggle事件而非summary的click；webview兼容性需真机测试。
summary 必须是 details 的第一个直接子元素
这是最常踩的坑：只要 <summary></summary> 前面有任何东西——哪怕一个空格、换行、<p></p>、<!-- 注释 -->，浏览器就不再把它识别为触发器。点击没反应，或内容始终收起。
正确结构只有一种：<details><summary>摘要文本</summary>...内容...</details>。别加 wrapper，别套 div，别在它前面放任何节点。
- 用 Prettier 或手动检查 DOM 源码，确认
<summary></summary>紧跟在<details></details>后面 - Vue/React 中动态渲染时，注意模板里是否意外插入了空白文本节点
- Safari 对这类结构错误更敏感，Chrome 可能“宽容”但行为不一致
summary 里的文本怎么改？别用 innerHTML 替换整个标签
想动态更新摘要文字，比如从「点击展开」变成「已展开」，直接操作 summary.textContent 就够了。千万别用 innerHTML = '新文本' 或替换整个 <summary></summary> 元素——这会重置焦点状态，键盘用户按 Space/Enter 失效，还可能丢失读屏器语义。
- 推荐写法：
detailsEl.querySelector('summary').textContent = '已展开' - 如果摘要里有图标或
<span></span>，只更新目标文本节点，保留其他结构 - 需要响应式文案（如带计数），用
data-*属性存状态，再拼接显示，避免反复 DOM 操作
summary 默认箭头怎么隐藏又不破坏交互？
浏览器对 <summary></summary> 的原生箭头渲染不统一：::marker 在 Firefox 支持好，Chrome 部分支持，Safari 基本忽略。直接上 list-style: none 或 appearance: none 容易让热区错位或点击失效。
稳妥做法是保留原生交互，仅视觉覆盖：
- 先清默认：
details summary::marker { content: ""; } - 用
details summary::after加自定义图标，比如content: "▼"; - 展开时用
details[open] summary::after { content: "▲"; } - 加
cursor: pointer强化可点击反馈，尤其在 Safari 上
toggle 事件监听比 click 更可靠
<summary></summary> 被点击只是触发方式之一；用户还可能用键盘（Space/Enter）或屏幕阅读器命令来切换。监听 click 会漏掉这些场景，且容易和内部按钮冲突。
- 必须监听
details元素上的toggle事件：detailsEl.addEventListener('toggle', handler) - 事件触发时，
detailsEl.open已是最新的布尔值，不用再查 - 不要给
<summary></summary>绑click，也不要用role="button"—— 它本来就是语义化的可交互元素
真正麻烦的是 WebView：微信、钉钉、飞书等 App 内嵌浏览器对 <details></details> 的支持程度不一，有的始终展开，有的点不动。上线前务必真机测试，别只信桌面 Chrome 的表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
