open属性仅控制初始可见性，不激活模态行为；必须调用showModal()才能启用遮罩、焦点锁定、Esc响应等完整模态功能。
open属性只控制初始可见性，不激活模态行为
open 是一个布尔属性，写成 <dialog open></dialog> 或 <dialog open="open"></dialog> 效果相同。它仅在 HTML 解析阶段起作用：让 <dialog></dialog> 从默认的 display: none 变为可见，但不会触发任何模态逻辑。
常见错误现象包括：页面一加载就看到对话框内容，但点击遮罩无反应、按 Esc 没用、背景仍可滚动、Tab 键能穿出到页面其他元素——这些都说明你误把 open 当成了“模态开关”。
-
open不会自动插入::backdrop -
open不会锁定焦点，也不会设置aria-modal="true" -
dialog.open = true在 JS 中赋值无效（DOM 已挂载后设该属性不改变渲染状态） - 移动端 Safari（iOS 16.3 及更早）对
open的支持极弱，可能完全忽略或渲染错位
真正启用模态行为必须调用 showModal()
只有 dialog.showModal() 才会激活完整模态链路：添加灰色遮罩、禁用背景滚动、捕获焦点、响应 Esc、触发 close 事件、正确处理屏幕阅读器语义。
使用场景很明确：用户进入页面需立即弹出 GDPR 同意框、登录态校验失败提示、关键操作二次确认等。这时不能只靠 open，而要在 DOM 就绪后显式调用：
document.addEventListener('DOMContentLoaded', () => {
const dialog = document.getElementById('consentDialog');
// 确保元素存在且浏览器支持
if (dialog && typeof dialog.showModal === 'function') {
dialog.showModal();
}
});
- 别在
<script></script>标签里直接调用showModal()，否则容易报Cannot read property 'showModal' of null -
dialog.show()几乎不用：它只是非模态浮层，无遮罩、不锁背景、不拦截 Tab，和position: fixed的<div> 差别不大 <li>服务端渲染时若需首屏即弹，仍得走 JS 调用 <code>showModal()，open属性无法替代 - 打开流程：先加
is-open类 → 浏览器触发 transition → 再设dialog.open = true（或调用showModal()） - 关闭流程：先移除
is-open类 → 监听transitionend→ 再调用dialog.close() -
::backdrop的过渡需单独声明，例如：dialog::backdrop { opacity: 0; transition: opacity 0.3s; }+dialog.is-open::backdrop { opacity: 1; } - 不要试图用
display: block或visibility: visible强行覆盖，浏览器会忽略 - 外层包裹透明
<div class="backdrop"> 并用媒体查询控制显隐，模拟遮罩感 <li>给 <code><dialog></dialog>加tabindex="-1"和autofocus，提升键盘可访问性 - 避免依赖
:modal伪类做样式区分——它只匹配showModal()激活的实例，open属性不触发 - 若需居中，CSS
margin: auto+position: absolute配合top/left是目前最稳方案，不要指望open自带居中
动画必须用 class 控制，不能依赖 open 属性切换
open 属性切换是原子操作，没有中间状态，因此直接给 <dialog></dialog> 写 transition: opacity 0.3s 完全无效。你看到的“啪一下出现”，就是这个原因。
正确做法是解耦 DOM 状态与视觉状态：用自定义 class（如 is-open）驱动 CSS 过渡，open 仅保留语义和无障碍用途。
无 JS 场景下 open 是唯一 fallback，但代价清晰
当页面禁用 JavaScript 或作为降级方案时，<dialog open></dialog> 确实是唯一能让内容“被看见”的方式。但它只解决“看得见”，不解决“用得上”。
此时建议手动补一层最小可用性：
复杂点在于：你得同时维护两套逻辑——JS 启用时走 showModal() + class 动画，无 JS 时靠 open + 手动 backdrop + CSS 补丁。这两条路径无法自动合并，必须显式区分。
