details标签本身不提供防剧透语义，仅是折叠容器；需配合明确警告文案、ARIA属性、CSS视觉强化及JS守卫逻辑才能实现有效剧透防护。
details 标签本身不提供“防剧透”语义，它只是个折叠容器；真正起作用的是你如何用它包裹内容、配合 ARIA 和 CSS 控制显隐逻辑。
为什么不能直接用 details 当剧透标签
浏览器对 details 的渲染逻辑是“可展开/收起”，不是“需警告后才允许查看”。用户点一下就看到全部，没有任何前置提示、无确认机制、无障碍朗读时可能跳过警告直接读内容。常见翻车点：
- 只写
剧透
结局是……
- 用
open属性默认展开 → 完全失去提示意义 - 没给
summary加视觉区分（比如 ⚠️ 图标、红色文字）→ 普通用户扫一眼就点开，毫无预警
summary 里必须塞明确警告文案，且不可省略
剧透提示不是装饰，是信息前置声明。把警告写进 summary 文本内，是最轻量也最可靠的传达方式：
- ✅ 正确：
⚠️ 含《奥本海默》结局剧透，点击展开 - ❌ 错误：
点击展开 - ❌ 错误：
详情 aria-label不会被所有屏幕阅读器优先读出，且视觉上无提示）
如果需要多语言或复用提示，可用 aria-describedby 关联外部 summary 本身仍需含基础警告词，如“含剧透”。
CSS 隐藏原生箭头 + 强化警告视觉，别依赖 ::marker 全兼容
默认小三角会干扰警告感，且 Firefox/旧 Safari 对 summary::marker 支持不稳定。稳妥做法是彻底禁用并手动加图标：
- 统一清除原生指示符：
summary { list-style: none; }+summary::-webkit-details-marker { display: none; }+summary::marker { content: ""; } - 用
::before插入醒目图标：summary::before { content: "⚠️ "; font-size: 1.2em; vertical-align: middle; margin-right: 4px; } - 为展开态加样式区分：
details[open] > summary::before { content: "✅ "; color: #28a745; } - 避免用
appearance: none—— 它在部分 Safari 版本中会破坏键盘焦点行为
JS 控制要防重复加载，且别用 hidden 做动画
如果剧透内容需异步加载（比如从 API 拉取长文本），toggle 事件里插入 HTML 必须加守卫：
- 检查是否已加载：
if (!el.hasAttribute('data-loaded')) { fetch(...).then(html => { el.querySelector('div').innerHTML = html; el.setAttribute('data-loaded', ''); }); } - 别用
hidden属性做淡入动画 —— 它是强制display: none，CSStransition对它无效 - 改用 class 切换：
details:not([open]) .spoiler-content { opacity: 0; transform: translateY(-4px); }+details[open] .spoiler-content { opacity: 1; transform: translateY(0); } - 动画时间控制在 200–300ms 内，避免用户等待感
真正难的不是怎么让内容藏起来，而是判断哪句话该标、标到哪一级——比如角色名字首次出现要不要标？一句台词带暗示要不要标？这没有技术解，只有编辑规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
