调用 showModal() 是唯一能真正阻止背景交互的方式，因其触发浏览器模态栈管理，禁用指针事件、拦截焦点、挂起背景渲染；其他方式如设置 open 属性或调用 show() 均无效。
调用 showModal() 是唯一能真正阻止背景交互的方式，其他写法（比如只设 open 属性或调用 show()）都不起作用。
为什么 background 仍可点击、Tab 仍能穿透？
根本原因是你没走模态流程。浏览器只在 showModal() 被调用时，才启用底层的模态栈管理：禁用指针事件、拦截键盘焦点、挂起背景渲染更新。光写 <dialog open> 或执行 dialog.show()，dialog 就只是个普通块级元素，和 <div> 行为一致。
-
dialog.open = true或dialog.setAttribute('open', '')不触发任何模态逻辑 -
dialog.show()不加::backdrop，也不锁焦点，Tab 键会直接跳到背景按钮上 - 手动设
dialog.style.pointerEvents = 'none'反而会让showModal()的焦点锁定失效
必须确保 dialog 是 <body> 的直接子元素
如果 dialog 嵌套在 <form>、<div class="wrapper"> 或任何设置了 transform/overflow 的容器里，Chrome/Safari 可能不渲染 ::backdrop，或者背景交互禁用失效——这不是 bug，是浏览器对浮层定位和事件捕获区域的限制。
- 动态创建时务必用
document.body.appendChild(dialog) - 别依赖框架的“挂载到 root”逻辑，要确认最终 DOM 中
dialog确实在body下一级 - 检查
getComputedStyle(dialog).display，正常应为block；若为none，说明还没被showModal()激活
点击 backdrop 关闭需手动监听，且 Safari 旧版本有坐标陷阱
::backdrop 不是真实 DOM 节点，它不冒泡、无 class、无法绑定事件。点击它时，事件目标（e.target）是 dialog 元素本身，而不是某个“遮罩层”。规范明确不定义点击 backdrop 的行为，所以必须自己判断。
立即学习“前端免费学习笔记（深入）”；
- 标准写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在
e.target始终为document.body的 bug，需 fallback 判断坐标：e.clientX < dialog.getBoundingClientRect().left或e.clientY < dialog.getBoundingClientRect().top - 别给
dialog设pointer-events: none，否则showModal()的焦点自动聚焦会彻底失效
最易被忽略的一点：即使 showModal() 成功执行，若内部没有可聚焦元素（比如全是 <p> 和 <span>），焦点可能落在 body 上，用户按 Tab 仍会切出弹窗——务必加 autofocus 或手动 focus() 到第一个按钮。
