dialog 默认隐藏，需添加 open 属性或调用 showModal() 才可见；showModal() 提供模态行为（禁用背景、Esc 关闭、焦点锁定），而 open 或 show() 无此功能；关闭应确保元素已连接并调用 close()，推荐事件委托；兼容性差时需 fallback。
dialog 标签不显示？先检查 open 属性
原生 默认是隐藏的，没有 open 属性就完全不会渲染到可视区域，也不会触发任何交互。这不是 bug，是规范行为——它不像 alert() 那样自动弹出。
- 必须显式添加
open属性才能让对话框可见： - 用 JavaScript 控制时，推荐用
showModal()而不是直接设open：前者激活模态层、禁用背景交互、支持 Esc 关闭；后者只是“打开”，无模态行为 -
show()方法也能打开，但不阻断背景点击，适合非模态提示，一般警告不用它
点击确定后关闭 dialog 的正确写法
很多人直接在按钮上写 onclick="this.closest('dialog').close()"，看似能关，但实际可能报错：如果按钮不在 内部，closest() 找不到；即使找到了，close() 调用前没确保元素已连接（connected），也可能失败。
- 推荐绑定事件到
自身，监听内部按钮：<dialog id="warnDialog"><p>操作不可撤销</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button onclick="document.getElementById('warnDialog').close()">确定</button> </dialog> - 更健壮的做法是用事件委托或统一管理：
dialogElement.addEventListener('click', e => { if (e.target.matches('[data-action="confirm"]')) dialogElement.close(); }) - 注意：调用
close()后，open属性会被移除，DOM 仍存在，只是不可见；如需彻底移除，得手动remove()
警告对话框必须阻止背景交互，否则不是真警告
只靠 + open 不足以实现警告语义——用户还能点背景、切窗口、按 Tab 切换焦点。真正起作用的是 showModal() 触发的浏览器级模态栈。
- 务必用
dialogElement.showModal()替代dialogElement.show()或设置open属性 - 模态状态下，焦点会自动锁定在 dialog 内；Esc 键默认触发
close()；点击 backdrop（半透明遮罩）也会关闭（除非阻止cancel事件） - 若发现背景仍可点击，检查是否误用了
show()，或 dialog 被包裹在display: none/visibility: hidden的父容器里
兼容性差？别硬扛，加个简单 fallback
在 Safari 上直到 16.4 才支持 showModal()，旧版 Edge（
- 检测支持性：
if ('showModal' in HTMLDialogElement.prototype)，不支持时降级为confirm()或轻量级 div 模拟 - 不要用 polyfill 库（如 dialog-polyfill），它依赖 MutationObserver 和复杂样式重置，容易和现有 CSS 冲突
- 最简 fallback 示例：
if (!('showModal' in HTMLDialogElement.prototype)) { if (!confirm('操作不可撤销，确定继续？')) return; }
真实项目里，警告逻辑本身比 UI 更关键：确认前该做的校验、取消后该清理的状态，这些比用不用 更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
