<dialog>元素的backdrop仅在调用showModal()时激活，show()或open属性均不触发；其样式只能通过::backdrop伪元素设置，且无法用JS操作或监听。
dialog 元素默认不启用 backdrop，必须显式调用 showModal()
原生 <dialog> 的 backdrop（半透明遮罩层）不是自动出现的——它只在通过 showModal() 方法打开时才渲染。用 show() 或直接设 open 属性，backdrop 完全不会出现，页面其余部分仍可交互。
常见错误是写成：<dialog open></dialog> 或调用 dialog.show()，结果发现背景没变灰、Esc 不关闭、点击外部也不关闭——全是因 backdrop 未激活。
-
showModal()会：触发 backdrop、禁用背景滚动、捕获焦点、响应 Esc 和点击 backdrop 关闭 -
show()相当于纯 CSS 层级提升，无 backdrop、无焦点管理、无默认关闭行为 -
open属性仅控制可见性，与 backdrop 无关；设了open但没调showModal()，backdrop 依然不出现
backdrop 样式只能通过伪元素 ::backdrop 修改
浏览器生成的 backdrop 是一个匿名、不可选中、不可添加 class 的层，唯一合法修改方式是 CSS 中使用 ::backdrop 伪元素。不能用 JS 操作它，也不能靠父容器样式穿透影响它。
典型写法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.75);
}
- 必须用双冒号
::backdrop（单冒号:backdrop在现代浏览器已不支持） - 只接受有限样式：
background、background-color、opacity（部分浏览器支持），其他如filter、transform无效 - 无法通过 JS 获取或监听 backdrop 节点，
document.querySelector('dialog::backdrop')会报错
backdrop 不会覆盖 <select>、<iframe> 等原生控件（z-index 陷阱）
在部分浏览器（尤其是旧版 Chrome 和 Safari）中，::backdrop 的层级可能低于 <select>、<iframe>、<video> 等原生控件，导致遮罩“穿孔”，背景内容仍可见可操作。
- 这不是 bug，而是这些元素被系统级渲染，z-index 无法干预
- 临时缓解：对问题元素加
translateZ(0)或will-change: transform，有时能提升图层层级 - 更可靠方案：在打开 dialog 前，用 JS 隐藏或禁用附近
<select>等元素（例如select.disabled = true） - 注意：Firefox 对此兼容性较好，Chrome 120+ 有改善，但 iOS Safari 仍较顽固
dialog 关闭后 backdrop 立即销毁，无法复用或缓存
每次调用 showModal()，浏览器都会新建一个 backdrop 元素；调用 close() 后，该 backdrop 从 DOM 中彻底移除，没有重用机制。这意味着你不能提前给 backdrop 绑定事件、添加动画 class 或做持久化样式切换。
- 想加淡入淡出？得靠 CSS transition +
dialog[open]触发，例如：dialog::backdrop { opacity: 0; transition: opacity 0.2s; } dialog[open]::backdrop { opacity: 0.75; } - 不能在 backdrop 上监听 click —— 它没暴露给 JS，点击 backdrop 触发的是
dialog元素的close事件 - 若需自定义关闭逻辑（比如确认退出），应在
dialog的close事件里处理，而非试图拦截 backdrop
showModal() 的副作用，不是独立组件；它的存在、样式、生命周期完全由浏览器控制，任何试图绕过这个模型的操作，基本都会掉进兼容性或行为不一致的坑里。 
