dialog 的 open 属性是反射属性而非布尔属性，仅存在即生效，不解析值；必须用 open 或 open=""，写 open="false" 仍会打开；无法通过 HTML 或 CSS 动态控制，需 JS 调用 show/close；Safari 16.4 前不支持该属性，兼容性差。
dialog 的 open 属性不是布尔属性，直接写 open 就生效
很多人误以为 open 像 disabled 或 required 那样是布尔属性，只要存在就为 true——其实不然。dialog 的 open 是一个**反射属性（reflected content attribute）**，它没有值也能生效，但写法必须是 open 或 open=""，不能写成 open="false" 或 open="0"。浏览器只认“是否存在”，不解析其值。
常见错误：在 HTML 中写 <dialog open="false">，结果弹窗依然显示——因为只要属性存在，dialog 就会强制打开。
-
<dialog open>✅ 正确，初始打开 -
<dialog open="">✅ 等价写法，也打开 -
<dialog>✅ 默认关闭（无 open 属性） -
<dialog open="false">❌ 仍打开，属性存在即生效
open 属性无法通过 CSS 或 HTML 属性动态切换，必须靠 JS 或表单提交
HTML 属性是静态的，页面加载后就不能靠改 HTML 字符串来控制 open 状态。你不能用 style="display:none" 隐藏 dialog 并指望它“不打开”——open 属性优先级高于 display，只要存在，元素就会渲染为模态层并聚焦。
真正能触发原生打开行为的只有两种方式：
立即学习“Java免费学习笔记（深入）”；
- 页面加载时自带
open属性（纯静态弹窗） - 用户点击
<form method="dialog">内的<button>，提交后自动关闭dialog；反过来，点击<button formmethod="dialog">也能打开关联的dialog（需设置form和dialog的id/name关联）
注意：formmethod="dialog" 是唯一无需 JS 就能“打开” dialog 的 HTML 方式，但它要求 dialog 有 name，且 button 在同一表单作用域内或显式指定 form 属性。
dialog 打开后，Esc 键和 backdrop 点击默认关闭，但需显式加 close() 才能重置状态
带 open 属性的 dialog 一旦渲染，用户按 Esc 或点击灰色遮罩（backdrop）会触发关闭，DOM 上的 open 属性**不会被移除**——它只是视觉/焦点状态变化。这意味着下次页面加载，如果 HTML 里还写着 open，它又会打开。
所以“无 JS 触发”仅适用于一次性初始弹窗。若想支持反复开关，必须用 JS 调用 dialog.close() 或 dialog.showModal()，否则无法清除已激活的状态。
- 纯 HTML 场景下，
open是“只开不关”的单向开关 - 关闭后
dialog.openDOM 属性仍为true，但:modal伪类失效，document.activeElement也会离开它 - 若依赖后续 JS 操作（比如监听
close事件），务必检查dialog.open的当前值，而不是只看 HTML 是否含open
兼容性差是最大现实约束，Safari 直到 16.4 才支持 open 属性 + showModal
Chrome 和 Firefox 对 dialog 支持较早，但 Safari 长期只支持 showModal()，不识别 open 属性——直到 2023 年 4 月发布的 Safari 16.4。这意味着如果你的用户包含大量 macOS/iOS 旧系统用户，写 <dialog open> 会被 Safari 忽略，变成普通块级元素，既不居中也不遮罩。
检测方法很简单：
if ('showModal' in HTMLDialogElement.prototype) {
// 可安全使用 dialog
}
但这个检测不能替代 open 属性的支持判断——Safari 16.3 有 showModal 却不响应 open 属性。真正稳妥的做法仍是：关键业务弹窗别依赖纯 HTML open，至少备一个 JS fallback。
另外，dialog 不支持 position: fixed 子元素脱离模态层限制，也不继承父级 z-index；它的层级由浏览器内部管理，硬覆盖容易出问题。
