details标签默认不支持徽章，需用CSS伪元素模拟；推荐通过data-count属性配合::after渲染计数，避免语义破坏与兼容性问题，并注意动态更新时仅修改属性值以保持展开状态。
details标签默认不支持徽章，必须用CSS伪元素模拟
原生 <details> 标签没有内置徽章（badge）能力，所谓“计数徽章”只能靠 ::after 或 ::before 在 <summary> 上叠加。直接往 <summary> 里塞 <span> 虽然可行，但会破坏语义结构，且在 Safari 中可能触发意外换行或焦点行为异常。
推荐做法是把计数作为 <details> 的自定义属性传入，再用 CSS 提取渲染：
<details data-count="3"> <summary>用户反馈</summary> <p>共3条未处理反馈…</p> </details>
对应 CSS：
details[data-count] > summary::after {
content: "[" attr(data-count) "]";
font-size: 0.75em;
margin-left: 0.5ch;
color: #666;
background: #f0f0f0;
padding: 0.1em 0.4em;
border-radius: 2px;
}
summary:focus-visible 与键盘导航的兼容性问题
当用户用 Tab 键聚焦到 <summary> 时，部分浏览器（尤其是 Chrome）默认只对键盘操作显示焦点环，而鼠标点击不会触发 :focus-visible。如果你用 summary:focus-visible::after 来高亮徽章，会导致鼠标用户完全看不到焦点反馈。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是分离状态逻辑：
- 徽章始终显示（靠
data-count属性） - 焦点样式单独作用于
<summary>文本区域，不干扰徽章定位 - 避免给
::after加outline或box-shadow，否则在缩放或高对比度模式下易被裁切
展开/折叠状态需通过 JS 同步更新计数时的性能陷阱
如果徽章数字需要动态变化（比如用户点击某条反馈后，计数从 3 变成 2），不能每次修改都重写整个 <details> DOM —— 这会丢失当前展开状态，导致页面闪动。
正确做法是只更新属性值，并确保 CSS 能实时响应：
const details = document.querySelector('details[data-count="3"]');
details.setAttribute('data-count', '2'); // ✅ 安全更新
注意两点：
- 不要用
details.dataset.count = '2'，IE 不支持dataset，且某些旧版 Safari 对属性变更监听不敏感 - 如果计数来自异步请求，记得在
details.toggleAttribute('open')前完成属性更新，否则视觉和状态可能短暂不一致 - CSS 中的
attr(data-count)是实时计算的，无需额外触发重绘
移动端 Safari 的 summary 点击延迟与徽章误触
iOS Safari 对 <summary> 有约 300ms 点击延迟，且如果徽章区域太小（
解决方案很直接：
- 给
summary::after加pointer-events: none，让点击穿透到父级<summary> - 用
min-width和min-height保证整个<summary>可点区域 ≥ 44px - 避免在徽章上设置
cursor: pointer，这会误导用户以为它是独立控件
实际中，最常被忽略的是徽章颜色在深色模式下的可读性 —— #666 在暗背景下几乎看不见，建议用 color: var(--text-secondary, #666) 配合 @media (prefers-color-scheme: dark) 覆盖。
