标签不能直接实现侧边通知栏效果，因其本质是语义化折叠控件，无定位与动画能力；需配合独立固定定位容器、transform动画及toggle事件监听来可靠实现。
details 标签本身不能做侧边通知栏
直接用 <details></details> 无法实现“侧边固定 + 滑入动画 + 独立于主内容流”的通知栏效果。它本质是语义化折叠控件，渲染为块级元素，默认垂直堆叠、无定位能力、不支持右/左固定布局。
常见误用是把 <details></details> 套在 <aside></aside> 或加 position: fixed，结果发现：点击后整个页面重排、滚动失效、无法控制展开方向、移动端点透或失焦——这些都不是 bug，而是标签设计使然。
真正可行的组合方案：details + CSS 定位 + transform
要把通知栏“看起来像由 details 触发的侧边栏”，得用 <details></details> 做开关，但视觉容器必须另起一层（<div class="notification-sidebar">），再靠 CSS 控制显隐和位置。
<ul>
<li>
<code><details></details> 放在 DOM 顶部或工具栏里，仅负责状态（open 属性）和可访问性（自动绑定 <summary></summary> 焦点与键盘操作）
position: fixed + right: 0 + top: 0，高度撑满视口<details>:not([open]) + .notification-sidebar</details> 或 JS 监听 toggle 事件来切换 transform: translateX(100%) 和 translateX(0)
transition: transform 0.3s ease，否则只有硬切示例关键片段：
<details id="notify-toggle"><summary>?</summary></details><div class="notification-sidebar">
<button onclick="document.getElementById('notify-toggle').removeAttribute('open')">×</button>
<p>新消息：用户 A 已加入</p>
</div>
<style>
.notification-sidebar {
position: fixed;
top: 0;
right: 0;
width: 320px;
height: 100vh;
background: #fff;
box-shadow: -2px 0 8px rgba(0,0,0,0.1);
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 1000;
}
details[open] + .notification-sidebar {
transform: translateX(0);
}
</style>
为什么不用纯 CSS 的 :has() 方案？
看似可以用 body:has(details[open]) .notification-sidebar 驱动样式，但目前（截至 2024 年中）:has() 在 Safari 中对 <details></details> 的支持不稳定：部分版本下 open 属性变更不会触发重绘，导致侧边栏卡死在旧状态。
更可靠的做法是监听 toggle 事件并手动切换 class：
document.getElementById('notify-toggle').addEventListener('toggle', function() {
document.querySelector('.notification-sidebar')
.classList.toggle('open', this.open);
});
然后用 .notification-sidebar.open { transform: translateX(0); } 控制显隐——这样兼容性好，逻辑清晰，也方便后续加读取未读数、自动关闭等逻辑。
移动端适配和焦点陷阱必须处理
侧边栏展开时，用户仍能滚动背景页、焦点可能落在不可见区域、触摸穿透到下层按钮——这些不是细节，是实际交付时必现的问题。
- 展开时给
加overflow: hidden，收起时恢复 - 侧边栏内第一个可聚焦元素（如关闭按钮）在
open后自动.focus() - 按
Esc键应关闭栏：监听keydown，判断event.key === 'Escape'且侧边栏可见 - 点击遮罩层（可选）关闭：在
.notification-sidebar外层加一个半透明<div class="sidebar-backdrop">，点击它触发 <code>details.removeAttribute('open')没做这些，用户在 iPhone 上划两下就可能误点到背后按钮，或者关不掉通知栏——不是交互差，是基础行为没兜住。
