<dialog> 是原生 HTML 元素，非框架内置组件，需手动处理生命周期、事件绑定与状态同步；Vue 中禁用 v-if 控制其存在，应改用 v-show 并在 onMounted 后调用 showModal()；React 中须用 useRef + 空值检查调用方法，并通过 close 事件监听而非 state 判断关闭；method="dialog" 表单必须直属于 <dialog> 才生效。
dialog 标签在现代前端框架中不是“开箱即用”的组件，它本身是原生 HTML 元素，但直接嵌入 Vue/React 等框架时会遇到生命周期、事件绑定、状态同步等实际问题。别指望写个 <dialog> 就能自动响应式显示——你得亲手接管它的 open 属性、监听 close 事件，并处理浏览器默认行为与框架更新的节奏差。
Vue 中如何避免 dialog 被 Vue 的 DOM diff 移除
Vue 会把未绑定任何响应式属性的 <dialog> 当作静态节点，在 v-if 切换或组件重渲染时可能意外销毁 DOM 实例，导致 showModal() 失败（报错 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a document.）。
- 永远不要用
v-if控制<dialog>的存在与否；改用v-show或 CSSdisplay: none隐藏 - 确保
<dialog>在挂载后才调用showModal()，推荐在onMounted或nextTick后操作 - 如果用了
teleport（比如传到body），必须手动调用dialogPolyfill.registerDialog(el)（仅 polyfill 场景），且确保 teleport 目标已存在
React 中 ref 获取 <dialog> 实例的常见陷阱
React 函数组件里用 useRef 拿不到初始渲染后的 <dialog> DOM 节点，因为首次渲染时 ref 还没赋值；而 showModal() 必须在真实 DOM 上调用。
- 不要在
useEffect(() => { dialogRef.current?.showModal() }, [])里直接调用 —— 此时current可能为null - 正确做法：加空值检查 +
if (dialogRef.current) dialogRef.current.showModal() - 关闭时监听
onClose事件比依赖 state 更可靠：useEffect(() => { const el = dialogRef.current; if (el) el.addEventListener('close', handler); return () => el?.removeEventListener('close', handler); }, []) - 注意：React 18 的并发渲染可能导致多次触发
useEffect，showModal()不幂等，重复调用会报错
表单提交自动关闭失效？检查 method="dialog" 的嵌套层级
<form method="dialog"> 关闭对话框的前提是：该 form 必须**直接子元素**位于 <dialog> 内部，且不能被其他非 dialog 的块级容器（如 <div>、<section>）隔开。
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效：
<dialog><form method="dialog">...</form></dialog> - ❌ 无效：
<dialog><div><form method="dialog">...</form></div></dialog>（Chrome 会忽略，不触发关闭） - 按钮类型必须是
type="submit"（默认值），type="button"或type="reset"不会触发表单提交，也就不会关闭 - 关闭后可通过
dialog.returnValue获取点击按钮的value，但注意该值只在close事件中可读，且需在事件回调里立即取 —— React/Vue 的异步更新可能让它变成undefined
兼容性补救：polyfill 初始化时机很关键
dialog-polyfill 不是“引入就生效”，它需要显式注册每个 <dialog> 实例，且必须在浏览器解析完该元素之后执行。
- 在 Vue 中，不能在
data或setup()开头就调用dialogPolyfill.registerDialog(dialogEl)—— 此时 DOM 还没生成 - 应在
onMounted中查询并注册：const el = document.getElementById('myDialog'); if (el) dialogPolyfill.registerDialog(el); - React 中同理，放在
useEffect里，且要确保 ref 已挂载 - polyfill 注册后，
showModal()/close()才会 fallback 到模拟逻辑；否则在旧浏览器中这些方法根本不存在，调用即报错
真正难的不是写出 <dialog>，而是让它的生命周期、事件流、样式层叠和框架的 reactivity 机制不打架。尤其当多个 dialog 嵌套、或配合 teleport/createPortal 使用时，::backdrop 的样式作用域、焦点管理、Esc 键传播路径都会突然变得不可预测 —— 这些细节，文档很少提，但线上 bug 经常源于此。
