的 open 属性仅控制初始可见状态，不触发模态行为；真正可控的开关必须用 showmodal() 和 close() 方法，show() 无遮罩、remove() 等操作会破坏模态逻辑。
dialog 的 open 属性只是初始开关，不是控制接口
写了 <dialog open></dialog> 页面一加载就显示，但这不是“可控”的打开方式。open 是布尔属性，只决定初始渲染状态，不触发模态行为（没遮罩、不锁焦点、Esc 不生效），也不能靠它反复开关——手动删掉 open 属性或设 dialog.open = false，对话框依然可见。
真正能控制显隐的只有 JS 方法：showModal()（推荐）、show()（非模态）、close()（唯一标准关闭）。open 属性仅适合静态预设可见状态，比如服务端渲染首屏提示，但生产环境极少这么用。
为什么直接写 open 属性后 dialog 还是不显示？
常见现象：HTML 里写了 <dialog open>内容</dialog>，刷新页面却什么都没看到。这不是 CSS 或 JS 错误，而是浏览器根本没把它当“可绘制元素”处理——<dialog></dialog> 默认 display: none，且不参与布局流，getBoundingClientRect() 都返回空值。
- 检查是否漏写了
open属性本身（不是open="true"或其他值，布尔属性有即真） - 确认没有被其他 CSS 强制设为
display: none或visibility: hidden - 排除父容器设置了
overflow: hidden且 dialog 溢出裁剪
showModal() 才是唯一可靠的“打开”动作
要用 JS 控制弹窗，必须调用 showModal()。它会自动激活模态层（dialog::backdrop）、禁用背景交互、聚焦第一个可聚焦子元素，并支持 Esc 关闭。而 show() 只是浮层，Tab 键仍能穿透到背景页，不符合警告类弹窗语义。
正确写法示例：
const dialog = document.getElementById('myDialog');
const openBtn = document.getElementById('openBtn');
// ✅ 推荐：触发完整模态行为
openBtn.addEventListener('click', () => dialog.showModal());
// ❌ 不推荐：无遮罩、不锁焦点、Esc 失效
// openBtn.addEventListener('click', () => dialog.show());
注意：调用前必须确保 dialog 已挂载在 DOM 中，否则报 Cannot read property 'showModal' of null。把 <script></script> 放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
