dialog.close()仅移除open属性并隐藏内容，但元素仍保留在DOM中，需手动调用remove()或removeChild()彻底销毁，否则会导致焦点错乱、屏幕阅读器误读、querySelector冲突等问题。
警告对话框关了不等于销毁——如果只设 display: none 或删掉 open 属性，它还在 DOM 里占着位置，焦点流可能错乱，读屏软件仍会读出内容，甚至干扰后续同名元素的 querySelector 查找。
为什么 dialog.close() 后还要手动清理？
原生 调用 close() 只是移除 open 属性并隐藏内容，但元素本身保留在 DOM 中。这本身不是 bug，而是设计使然：方便复用、避免反复创建开销。但对“警告提示”这类一次性、非交互型弹窗，残留 DOM 就成了隐患。
- 焦点没归还给触发按钮，用户按 Tab 键可能跳进不可见的
内部 -
aria-hidden="true"没同步设置，屏幕阅读器仍会朗读其内容 - 若页面有多个警告框共用同一 ID（比如动态插入），
document.getElementById()可能返回错误实例 - Vue/React 中若用
v-if或useState控制显隐，但没加防抖，微小状态变化会频繁挂载/卸载，触发重排和内存泄漏
remove() 和 removeChild() 的适用边界
真要从 DOM 彻底移除，必须调用 remove()（现代浏览器）或 parentNode.removeChild()（兼容 IE11）。但不能无脑删——得确认它已关闭、无 pending 动画、且没有其他逻辑依赖该节点。
- 删之前检查
dialog.open === false，避免正在显示时被干掉 - 如果有 CSS fade-out 动画，监听
transitionend再删，否则动画会被截断 - 删完立刻执行
dialog = null，防止闭包中意外引用导致内存无法释放 - 不要在
close事件回调里直接remove()，因为此时dialog还没完全退出模态栈，可能引发 Safari 下的 focus 异常
如何让销毁逻辑自动适配数据驱动场景？
Vue/React 中警告框通常由状态字段（如 showWarning）控制。直接靠 v-if 或 {showWarning && 不够，得加一层“销毁确认”。
- 用
useEffect（React）或onUpdated（Vue 3）监听showWarning从 true → false 的瞬间 - 触发后启动一个
setTimeout（建议 300ms），等 CSS 动画结束、焦点回归完成后再调用dialog.remove() - 若警告框含异步操作（如上报日志），销毁前应
AbortController中止 fetch，避免remove()后 still trying to set state - 别依赖
ref直接取 DOM 元素——SSR 渲染时ref是 null；改用document.querySelector('dialog[role="alert"]')更稳妥
真正难的不是“怎么删”，而是删完之后是否还有 JS 在偷偷读这个节点、CSS 是否还给它分配了空间、AT 是否已忽略它。每次销毁前，用 DevTools 的 Accessibility 面板点一下那个 ，看它的 name 和 role 是否已失效——这才是验证销毁是否干净的最简单方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
