默认隐藏，需用 show()/showmodal() 打开；悬浮预览应选 show() 并手动定位、加 backdrop、管理焦点与关闭逻辑，否则体验断裂。
dialog 元素默认不显示，必须手动 open 属性或 JS 控制
直接写 <dialog></dialog> 不会渲染在页面上——它天生是 display: none。不加 open 属性，或没调用 show()/showModal()，用户根本看不见购物车预览。
常见错误是只写结构、漏掉触发逻辑，结果“悬浮”变“消失”。真实场景中，你得在点击「购物车图标」时显式打开：
document.getElementById('cart-btn').addEventListener('click', () => {
document.getElementById('cart-dialog').showModal();
});
modal dialog 会阻断背景交互，非 modal 需手动处理 backdrop 和焦点
购物车预览通常不需要模态遮罩（即用户仍可操作页面其他区域），但 showModal() 会强制加灰色 backdrop 并 trap focus——这不符合“悬浮预览”的轻量定位。
应改用 show()，但注意两点：
-
show()不自动添加 backdrop，需自己用::backdrop伪元素 + CSS 控制（仅 Chrome 111+、Edge 111+ 支持） - 焦点不会自动进入 dialog，键盘用户可能卡在按钮上；建议手动
dialog.focus()或设tabindex="-1" - 关闭时记得调用
close()，否则状态残留导致后续show()失效
定位悬浮效果要绕开 dialog 的默认居中行为
<dialog></dialog> 默认是视口居中 + 绝对定位，无法直接靠右上角“悬浮”。强行用 position: absolute 覆盖会破坏其内置的焦点管理与 backdrop 行为。
正确做法是：保留 <dialog></dialog> 语义和基础能力，用 CSS 重新定位：
dialog#cart-dialog {
position: fixed;
top: 60px;
right: 20px;
width: 320px;
max-height: 80vh;
margin: 0;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
关键点：
- 必须设
position: fixed（absolute在 dialog 内部计算中易错位） -
margin: 0必须写，否则浏览器内置 margin 干扰定位 - 不要设
left/bottom同时存在，避免响应式冲突
关闭按钮和 Esc 键需显式绑定，dialog 不自动关联
<dialog></dialog> 不像 <details></details> 那样自带开关逻辑。点击叉号、按 Esc、点 backdrop（如果用了）都得自己监听。
典型漏项：
- 没监听
keydown捕获Escape，导致无法键盘关闭 - 点了 backdrop 却没阻止事件冒泡，误触背后按钮
- 关闭后没重置购物车图标徽标数，UI 状态不同步
最小闭环示例：
const dialog = document.getElementById('cart-dialog');
dialog.addEventListener('click', (e) => {
if (e.target === dialog) dialog.close();
});
dialog.addEventListener('keydown', (e) => {
if (e.key === 'Escape') dialog.close();
});
document.querySelector('#cart-close').addEventListener('click', () => dialog.close());
dialog 的悬浮预览看似简单，但定位、焦点、关闭链、键盘可访问性这几处一旦漏掉，就会变成“看起来能用，实际体验断裂”的半成品。尤其是 show() 模式下 backdrop 兼容性差，别指望它跨浏览器一致工作——该手写 backdrop 元素就写，别硬扛伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
