必须手动先 close() 再 remove() dialog 元素，否则会导致模态栈异常、焦点错乱或 showmodal() 失败；v-if 或 usestate 控制 open 属性无效，应通过 close()/showmodal() 操作并确保路由切换时清理。
dialog 元素不会自动销毁，必须手动移除或重置
HTML <dialog></dialog> 是个原生模态组件，但它不感知路由变化。单页应用（如 Vue Router、React Router）切换时，<dialog></dialog> 元素仍保留在 DOM 中，即使对应组件已卸载——这会导致后续调用 showModal() 失败、焦点异常、甚至内存泄漏。
Vue 中在 unmounted 钩子中 close + remove
不能只调用 close()，因为元素还在 DOM 里；也不能只 remove()，否则未关闭就直接删会破坏浏览器模态栈（可能卡住页面滚动）。正确做法是先关闭再移除：
unmounted() {
const dialog = document.getElementById('my-dialog');
if (dialog && dialog.open) {
dialog.close(); // 触发 close 事件，释放焦点
}
if (dialog) {
dialog.remove(); // 确保 DOM 清理
}
}
-
dialog.close()必须在remove()前执行，否则浏览器可能报错Failed to execute 'close' on 'HTMLDialogElement': The element is not in a Document - 避免用
v-if控制<dialog></dialog>显示，因为v-if卸载时若open为 true，close()不会被触发，模态状态残留 - 如果多个路由共用同一个
id的<dialog></dialog>，务必确保每次 mount 前检查并清理旧实例
React 中用 useEffect 清理 + ref 管理
类比 Vue 的 unmounted，React 应在 useEffect 的清理函数中处理：
const dialogRef = useRef(null);
useEffect(() => {
return () => {
if (dialogRef.current) {
const dialog = dialogRef.current;
if (dialog.open) dialog.close();
dialog.remove();
}
};
}, []);
- 不要用
useState控制open属性来“隐藏” dialog——open是布尔属性，设为false不等于关闭，也不触发close事件 - 避免把
<dialog></dialog>放在条件渲染分支里（如{show && <dialog>...}</dialog>），因为 React 可能复用节点，导致open状态错乱 - 若使用 Portal 渲染到
body，需额外确保remove()作用于实际挂载位置，而非组件内节点
通用陷阱：open 属性与 open 状态不是一回事
<dialog open></dialog> 设置的是初始状态，但真正决定是否显示的是 JS 控制的 open 属性值（只读）和内部模态栈。常见误判：
- 检查
dialog.hasAttribute('open')≠ dialog 是否打开，应查dialog.open（返回布尔值） - 手动设置
dialog.open = false无效，必须用close()或cancel() - 路由切换后，即使
<dialog></dialog>元素被移除，浏览器仍可能保留其模态上下文，导致后续showModal()报错DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document
销毁的关键不是“让它消失”，而是“让它干净退出模态栈后再离开 DOM”。漏掉 close() 这一步，哪怕元素删了，也容易引发后续不可预测的 focus/scroll 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
