只有调用 dialogel.showmodal() 才会生成 dialog::backdrop 伪元素； 或 dialog.show() 不创建遮罩层，且 ::backdrop 仅支持 background-color、opacity、backdrop-filter 等有限样式。
dialog::backdrop 样式不生效，大概率是没调用 showModal()
直接写 <dialog open></dialog> 或调用 dialog.show() 不会生成 ::backdrop 伪元素——DevTools 里根本查不到它。只有 dialogEl.showModal() 才会触发浏览器创建这个遮罩层。常见错误包括：
• HTML 中写了 open 属性，但 JS 没走 showModal()
• 选择器写成 ::backdrop 或 .modal::backdrop，缺了 dialog 标签前缀
• CSS 文件加载顺序靠后，被更具体的选择器（如 dialog#myDialog）覆盖
dialog::backdrop 能安全设置的样式非常有限
它是个合成层伪元素，浏览器强制铺满视口、固定层级（在 <dialog></dialog> 下方、其他内容上方），不参与常规层叠上下文。能用的样式只有：
• background-color（推荐用 rgba(0, 0, 0, 0.5) 或简写 #0008）
• opacity（慎用，部分浏览器会和 background-color 叠加出意外灰度）
• backdrop-filter（如 blur(4px)，必须配 background-color 才稳定）
• mix-blend-mode 或 filter（如 grayscale(20%)，注意性能开销）
以下属性一律无效或危险：z-index、position、margin、padding、width、height、display
点击遮罩关闭弹窗不能靠默认行为，得手动处理
标准行为中 dialog::backdrop 默认是 pointer-events: none，点它不会触发任何事件。想实现“点遮罩关弹窗”，必须：
• 给 dialog::backdrop 加 pointer-events: auto（Safari 16.4+ 才支持）
• 更兼容的做法：监听 dialog 元素的 click 事件，检查 event.target === dialogEl
• 避免在 <dialog></dialog> 内部子元素上调用 event.stopPropagation()，否则 click 无法冒泡上来
• 别试图给 ::backdrop 直接绑事件——它是伪元素，不支持 addEventListener
:modal 伪类只作用于 dialog 自身，和遮罩无关
dialog:modal 是另一个独立机制，仅对调用 showModal() 的原生 <dialog></dialog> 生效（Chrome 105+/Firefox 103+/Safari 15.6+）。它控制的是弹窗容器本身的样式（比如边框、阴影、圆角），不是遮罩层。别指望用它改遮罩颜色或透明度——那得靠 dialog::backdrop。另外：
• 同一时间页面中只有一个 :modal 匹配（模态栈顶唯一）
• dialog:modal:hover 这类组合无效，:modal 已隐含焦点容器状态
• Shadow DOM 内部使用 :modal 行为未标准化，应避免
showModal() 是否执行、dialog::backdrop 选择器是否正确、以及你有没有碰那些被浏览器忽略的属性。最常被忽略的，是以为写了 open 属性就等于“已模态”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
