打印时details标签按当前DOM状态渲染，需在window.print()前用JS移除open属性；@media print中应隐藏非summary子元素而非details[open]，确保可访问性。
details 标签在打印预览中不会保持折叠/展开状态，它会按当前 DOM 状态渲染 —— 也就是说，如果页面加载后用户手动展开过，打印时就是展开的；如果没点过，就按 HTML 默认（无 open 属性）收起。这不是 bug，是浏览器打印引擎的行为：它不模拟交互历史，只抓取快照。
打印时 details 总是“意外展开”怎么办
常见现象：用户在页面上收起了所有 details，但打印预览里它们全展开了。原因只有一个：localStorage 存的状态没同步到打印时的 DOM —— JS 保存的是属性值，但打印不触发 JS 重执行，也不会读 localStorage。
- 不要指望 toggle 事件监听或
localStorage在打印时自动生效；打印是静态快照，JS 不运行 - 必须在调用
window.print()前，用 JS 主动把所有details设为收起态：el.removeAttribute('open') - 如果某些
details必须默认展开（比如法律条款），请直接在 HTML 里写<details open>，而不是靠 JS 设置 - 避免在
@media print里用details[open] { display: none; }—— 这会隐藏整个容器，连summary都没了，不符合可访问性要求
如何让打印内容只显示 summary，不展开详情
目标不是“隐藏”，而是“语义化呈现”：summary 是标题，详情是补充信息，打印时通常只需前者。最稳妥的做法是用 CSS 控制渲染，而非删 DOM。
- 在
@media print中写：details > *:not(summary) { display: none !important; } - 注意
summary必须是第一个子元素，否则选择器失效；若用了<div><summary></summary><p>...</p></div>这类结构，需改写为直接子级 - 别用
visibility: hidden—— 它仍占空白行，可能影响分页位置 - 如果需要在 summary 后加个“（展开内容已省略）”提示，可用
summary::after { content: "（展开内容已省略）"; font-size: 0.8em; color: #666; }
动态插入的 details 在打印前没被初始化
用 JS 动态生成的 details（比如从 API 渲染 FAQ 列表），常因初始化时机晚于打印触发，导致它们始终处于默认收起态 —— 即使用户之前点开过，打印时也收着。这不是状态丢失，是压根没走初始化逻辑。
立即学习“前端免费学习笔记（深入）”；
- 确保初始化代码（包括移除
open属性）在window.print()调用前已完成，最好封装成函数：resetDetailsForPrint() - 不要依赖
DOMContentLoaded，因为动态内容可能更晚插入；改用MutationObserver监听新增的details[data-id]并立即初始化 - 如果使用框架（如 Vue/React），在组件
beforePrint钩子或useEffect中统一处理，而非只靠首次挂载 - 测试时用 Chrome 的「另存为 PDF」功能比 Ctrl+P 更可靠，它能复现真实打印快照
真正容易被忽略的点是：打印不是“另一个视图”，而是脱离 JS 上下文的 DOM 快照。你不能假设用户交互状态、localStorage、甚至刚执行过的 JS 修改，在打印那一刻依然有效 —— 所有状态都得在打印前显式固化到 DOM 属性或 CSS 规则里。
