dialog标签仅为容器，不自动绑定编辑功能；需手动填充表单、监听事件、收集数据；method="dialog"仅返回按钮value；应监听close事件解耦逻辑；聚焦需显式调用focus()并挂载到body下；safari/ios兼容性需运行时检测。
dialog 标签本身不支持“信息编辑弹窗”的自动绑定或表单回填，它只是个容器；真正实现编辑功能，得靠你手动控制 DOM、监听事件、同步数据——不是写个 dialog 就能弹出可编辑表单的。
为什么直接放表单进 dialog 还是不能编辑旧数据？
常见错误是把 dialog 当成 Vue 的 v-model 或 React 的受控组件：只渲染一次 HTML，没在打开前动态填充字段值。结果弹窗里全是空输入框或默认值。
- 必须在调用
showModal()前，用 JavaScript 把当前要编辑的数据写入表单控件：input.value = item.name、textarea.textContent = item.desc - 如果表单用了
method="dialog"，提交后dialog.returnValue只返回按钮的value，不是整个表单数据——别指望它自动序列化 - 避免在 HTML 里硬编码初始值（如
<input value="默认">），否则每次打开都显示同一份“默认”，覆盖不了真实数据
method="dialog" 表单提交后怎么拿到编辑结果？
这个属性确实能让表单提交时自动关闭弹窗，但它的返回机制很窄：只把触发提交的按钮的 value 赋给 dialog.returnValue，其他字段值全丢弃。
- 正确做法：提交前手动收集数据，比如
const data = { id: dialog.dataset.id, name: form.name.value }，再存到变量或发请求 -
dialog.close(data)是可行的，但注意data会变成dialog.returnValue，而 Safari（截至 v17.6）始终返回空字符串，不能依赖它传结构化数据 - 推荐统一监听
close事件，在里面处理逻辑：dialog.addEventListener('close', () => { if (dialog.returnValue === 'save') submitForm(); })，把实际保存动作和关闭解耦
编辑弹窗里如何安全聚焦并保持键盘可用？
原生 dialog.showModal() 会锁定焦点 —— 但只锁第一次。如果你动态清空再重填表单内容（比如切换编辑项），焦点可能丢失或卡在 body，键盘用户就无法 tab 导航了。
- 每次打开前，确保首个可聚焦元素（如第一个
input）显式调用.focus() - 不要用
autofocus属性：它只在元素插入 DOM 时生效，而dialog是复用的，不会重新解析 - 关闭后，记得把焦点手动切回触发编辑的按钮：
triggerBtn.focus()，否则键盘用户会迷失在页面顶部 - 若父容器有
transform或overflow: hidden，可能导致dialog渲染错位甚至焦点穿透——必须把它挂载到document.body直系下，而不是嵌套在编辑器组件内部
移动端和 Safari 下编辑弹窗容易失效的三个点
iOS Safari 16.4+ 才完整支持 showModal()，且 backdrop 点击判定、焦点锁定在旧版本中极不稳定；Android WebView 更早版本甚至不识别 dialog 元素。
- 运行时检测不能只靠
@supports (display: dialog)，得用：if (typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype) - Safari 中
e.target === dialog判断点击 backdrop 几乎不可靠，降级方案得用坐标比对：const rect = dialog.getBoundingClientRect(); if (e.clientX - 移动端键盘弹出会挤压视口，
dialog可能被顶出屏幕。必须加max-height: 80vh和overflow-y: auto，且禁用body { height: 100vh }类样式，否则滚动失效
真正难的不是让弹窗出来，而是让它在各种设备上稳定接收输入、不丢焦点、不截断滚动、不误关——这些细节没处理好，编辑体验就断在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
