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