details[open]是唯一可靠的状态响应方式，必须用属性选择器匹配展开状态，toggle事件是唯一正确的监听入口，js控制需直接操作el.open属性，兼容降级应保持语义并持久化状态。
details[open] 是唯一可靠的状态响应方式
浏览器不提供 :open 伪类，也不自动添加 .open 类，open 是布尔属性，只看是否存在。CSS 必须用属性选择器 details[open] 才能精准匹配已展开状态——写成 details[open="true"] 或 details[open="false"] 全部无效。
常见错误是试图用 JS 动态加 class 来驱动样式，结果破坏语义、干扰屏幕阅读器，还多一层维护成本。原生 [open] 选择器零延迟、跨浏览器稳定，连 el.open = true 后也能立即生效。
注意：details[open] > * 只匹配 summary 之后的内容，不会影响 summary 自身样式，要改箭头或摘要背景必须单独写 details[open] summary。
toggle 事件才是唯一正确的状态监听入口
details 没有 change 事件，click 在 summary 上会屏蔽键盘（空格/回车）和屏幕阅读器行为，导致可访问性断裂。必须用 toggle 事件：
- 它在用户点击、键盘操作、JS 调用
el.toggle()或赋值el.open = true/false后统一触发 - 回调中读
el.open就是最新的布尔值，无需额外判断 - 首次加载时不会触发，所以默认展开的初始状态要靠 HTML
open属性或 CSS[open]处理，不能依赖事件
JS 控制 open 状态必须直接操作 DOM 属性
写 el.setAttribute('open', 'false') 是最常踩的坑：只要属性存在，浏览器就当它是展开，open="false" 和 open="banana" 效果一样——全部强制展开。
正确做法只有三种：
-
el.open = true或el.open = false（推荐，语义清晰） -
el.toggleAttribute('open')（同步更新 DOM 和 HTML 属性，适合需要保留在源码中的场景） -
el.toggle()（切换，不关心当前状态）
别用 el.hasAttribute('open') 判断状态——它查的是 HTML 源码，而 el.open 查的是实时 DOM 状态，两者不同步。
兼容旧环境时降级策略要轻量且语义保留
IE 全系不支持 details，Safari ≤15.4 对 JS 操作 open 有延迟，Edge 12–18 缺失 toggle 事件。检测只需一行：'open' in document.createElement('details')。
不推荐引入 polyfill，手写降级更可控：
- 结构保持不变：
<details><summary>...</summary><p>...</p></details> - 不支持时，用
max-height+overflow: hidden模拟过渡，同时手动设置aria-expanded和tabindex - 避免用
display: none/block，否则动画跳变、布局重排剧烈
真正容易被忽略的是状态持久化：浏览器不保存 open 状态，刷新即丢。要用 localStorage 存每个 details[data-id] 的布尔值，而不是靠索引或 class 名——SSR 或动态渲染下 DOM 顺序可能变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
