原生 HTML 中唯一标准对话框标签是 <dialog>，必须调用 showModal() 才激活模态行为；_DIALOG 非法命名，不被浏览器识别，也不符合自定义元素规范。
原生 HTML 中没有 _DIALOG 标签，也不存在浏览器支持的该自定义标签 —— 所有试图直接使用 <_DIALOG> 的写法都会被忽略或报解析错误。 它不是标准元素，也不是 Web Components 的合法命名（自定义标签名必须含短横线，如 <my-dialog>），更不是任何主流框架内置组件。下面说清楚怎么真正实现一个可控、可复用、语义正确的对话框。
用 <dialog> 元素实现原生弹窗（现代浏览器首选）
HTML5 原生 <dialog> 是唯一被规范支持的模态对话框元素，自带 open 属性、showModal() / close() 方法和 backdrop 样式逻辑。
- 必须显式调用
showModal()才能触发模态行为（仅设open属性不生效） - 用户按
Esc或点击 backdrop 会自动触发close事件，但需手动监听并处理状态同步 - 旧版 Safari（≤15.4）和部分安卓 WebView 不支持，需检查
'showModal' in HTMLDialogElement.prototype - 默认无样式，需至少设置
position: absolute或用display: flex居中，否则可能渲染在左上角
<dialog id="myDialog">
<p>这是原生对话框</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<script>
const dialog = document.getElementById('myDialog');
if ('showModal' in dialog) {
dialog.showModal(); // ✅ 必须调用
}
</script>
为什么不能直接写 <_DIALOG>？
浏览器解析 HTML 时，遇到未知标签名会创建一个 HTMLUnknownElement 实例，它没有 showModal()、不拦截焦点、不管理 backdrop、无法被 document.querySelector('dialog') 匹配到（除非你用 querySelector('_DIALOG')）。
-
_DIALOG含下划线，违反自定义元素命名规则（W3C 要求必须含短横线，如<app-dialog>） - 即使注册了
customElements.define('_DIALOG', ...)，也会抛出DOMException: The name "_DIALOG" is not a valid custom element name - 若强行用
document.createElement('_DIALOG')创建，它只是个空壳，所有交互逻辑都得从零实现
如果必须封装成组件，该用什么方式？
真正可行的封装路径只有两种：基于原生 <dialog> 的轻量包装，或用 <div role="dialog"> + ARIA 手动控制。前者推荐，后者用于兼容老环境。
- 封装
<dialog>时，把open改为受控属性（如通过isOpenprop 控制showModal()/close()调用时机） - 务必在
close事件后重置open属性，否则下次showModal()可能静默失败 - 避免在
<dialog>内部再套position: fixed元素——它会脱离对话框的 stacking context，导致遮挡异常 - 需要键盘导航支持？必须手动管理
tabindex和焦点循环（focusin捕获 +focusout拦截）
容易被忽略的关键细节
很多人以为加个 open 属性就等于弹出了，其实不是。真正起作用的是 JavaScript 方法调用；而 showModal() 一旦执行，就会强制将对话框置于顶层、禁用背景滚动、接管 Tab 键焦点 —— 这些行为无法用 CSS 模拟。如果你在调试时发现对话框“没弹出来”或“点 backdrop 没反应”，先检查是否漏了 showModal()，再确认是否在非用户手势（如异步回调里）调用它（Chrome 会拒绝非手势触发的 showModal()）。
