<details>默认仅渲染带原生三角图标的<summary>，图标不可定制或监听；控制逻辑应通过操作open属性和监听toggle事件实现，避免干扰原生行为。
details 标签默认不提供控制按钮，必须手动添加
<details> 本身只渲染一个可点击的 summary 区域，浏览器自动为其生成小三角图标（即“控制按钮”），但这个图标不可自定义、不可移除、也不响应 click 事件监听——它只是 UA 样式的一部分。真正能被 JS 操作和样式覆盖的，只有 <summary> 元素本身。
所以所谓“实现控制按钮”，本质是：用 <summary> 做视觉按钮，再配合 JS 控制 open 属性或触发切换逻辑。
- 不要试图给
<summary>加role="button"后忽略键盘交互——原生<summary>已支持空格/回车触发，加 role 反而破坏语义 - 若需图标位置调整（比如放到右侧），别用伪元素覆盖 UA 图标（不稳定），而是用
appearance: none隐藏原生图标，再用 SVG 或字体图标手动插入 - 注意 Safari 对
details[open]的 CSS 动画支持有限，过渡动画建议作用于内部内容区域，而非<details>自身
用 JavaScript 主动控制 open 状态时，优先操作 open 属性而非 toggle()
直接设置 open 属性更可靠，尤其在 SSR 或 hydration 场景下：detailsElement.open = true 会同步更新 DOM 和视觉状态；而 detailsElement.toggleAttribute('open') 或手动增删属性容易与浏览器内置逻辑冲突（比如用户刚点完 summary，JS 又立刻 setAttribute，可能触发两次展开/折叠）。
常见错误是用 click 事件监听 <summary> 并调用 toggle()——这会导致原生行为和 JS 行为叠加，出现“点一次没反应，再点一次才生效”的问题。
立即学习“前端免费学习笔记（深入）”；
- 如需程序化控制（比如外部按钮联动），直接读写
detailsElement.open布尔值 - 如需监听展开/收起，监听
toggle事件（不是click），该事件在用户交互或 JS 修改open属性后都会触发 - 避免对
<summary>绑定click并调用preventDefault()——这会禁用原生展开行为，且影响屏幕阅读器
兼容性差的场景下，details 不是 fallback 友好的选择
IE 完全不支持 <details>，旧版 Edge（≤18）也不支持。即使加了 polyfill（如 details-element-polyfill），其模拟行为仍与原生存在差异：比如无法通过 CSS 选择器 details[open] > * 精准控制子元素显示，或者 toggle 事件触发时机不一致。
如果项目需支持 IE 或强依赖服务端渲染首屏可见性，更稳妥的做法是用 <div> + ARIA 实现折叠面板，并把 <details> 当作 progressive enhancement 层级使用。
- 不要在 SSR 模板中依赖
details[open]的初始状态做关键布局判断——服务端不执行 JS，open属性不会被解析为“已展开” - 若用框架（如 React/Vue），注意
open是布尔属性，绑定时用:open.sync或v-model:open而非v-bind:open - 测试时务必在 Safari 15.4+、Chrome 120+、Firefox 115+ 中验证
toggle事件是否按预期触发，旧版本存在事件丢失问题
details > summary::marker 在部分浏览器里无法被完全重置，尤其是 Firefox 的 marker 会残留微小间距；如果追求像素级控制，建议直接 summary { list-style: none; } 并用 display: flex 手动排布图标与文字。 
