<dialog>标签默认隐藏，必须调用showModal()才激活完整模态行为（含遮罩、焦点锁定、Esc关闭）；仅写HTML或设open属性无效，且需手动定义dialog::backdrop样式、确保DOM就绪、处理Safari兼容性及焦点管理。
dialog 标签必须配合 JavaScript 才能显示
原生 <dialog> 默认是隐藏的，即使写在 HTML 里也不会自动弹出。它没有 open 属性时处于“关闭”状态，浏览器不渲染为可见模态框。直接写 <dialog>内容</dialog> 看不到任何东西——这不是 bug，是设计如此。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
showModal()方法触发模态展示（带背景遮罩、强制焦点、Esc 关闭） - 用
close()方法关闭（会触发close事件） - 不要依赖 CSS 的
display: block强行显示——这样绕过原生逻辑会导致焦点管理失效、Esc 无响应、Backdrop 缺失 - 若需非模态浮层（比如纯提示气泡），可用
show()，但注意它不拦截交互、不聚焦、不阻止滚动
dialog 的 backdrop 样式需要显式定义
Chrome/Edge/Firefox 对 ::backdrop 伪元素支持已稳定，但默认透明且无样式，看起来像没遮罩。不加 CSS 就等于没 backdrop。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }才有半透灰幕 - Firefox 旧版本（-moz- 前缀，但现在可忽略
- Backdrop 不继承父级 z-index，它的层级由浏览器控制（总在 dialog 下、页面内容上），别试图用
z-index调整它 - 如果 backdrop 点击没反应，确认没在它上面覆盖了其他空 div 或 pointer-events: none
form inside dialog 提交后默认会 close，但可阻止
当 <dialog> 内含 <form method="dialog">，点击 submit 按钮或回车会自动触发 close() 并把表单值作为参数传给 dialog.returnValue。这是便利特性，但也容易误触。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想提交后不关闭？把 form 的
method改成post或get，或监听submit事件并调用event.preventDefault() - 想获取提交值？用
dialog.returnValue（仅对method="dialog"有效），例如myDialog.addEventListener('close', () => console.log(myDialog.returnValue)) - 按钮类型别写错：
<button type="submit">触发表单行为，<button type="button">才适合做纯关闭按钮
dialog 在 Safari 上仍存在兼容性细节问题
Safari 15.4+ 支持 <dialog>，但部分行为和 Chromium 不一致：比如 showModal() 后首次 focus 可能不进第一个可聚焦元素；Backdrop 点击关闭在某些版本需手动监听；returnValue 在 Safari 中对非 method="dialog" 表单不生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必加 polyfill？不一定。若只支持 Safari 16.4+，基础功能可用；若需兼容 Safari 15.x，建议用
dialog-polyfill并统一初始化 - 手动聚焦更可靠：
dialog.showModal(); dialog.querySelector('input')?.focus(); - 不要依赖
dialog.open属性判断状态——Safari 中它始终为false，改用dialog.hasAttribute('open')或监听toggle事件
