必须调用showmodal()才能显示dialog弹窗，因默认为display:none；微信环境需降级为fixed弹层且禁用navigator.share()，否则静默失败或报错。
dialog 标签做分享链接弹窗，不是写完标签就自动弹出来——必须调用 showModal()，且微信环境要降级，navigator.share() 也不能直接用。
为什么不能只写 <dialog></dialog> 就完事
浏览器默认把 dialog 渲染为 display: none，DOM 里有它，页面上根本看不到。常见错误是：在 里就执行 document.querySelector('dialog').showModal()，结果报 Cannot read property 'showModal' of null——因为元素还没加载。
- 确保脚本在
DOMContentLoaded之后运行，或绑定在触发按钮的click事件里 - 不要把
dialog套在transform、will-change或overflow: hidden的父容器里，Safari 下遮罩会消失或错位 - 别手动删
open属性：showModal()会自动加，删了就“看不见但还在”
怎么让点击遮罩关闭生效（尤其兼容 Safari）
原生 dialog 点击 backdrop 不自动关闭，规范没定义这个行为；Chrome/Edge 120+ 可靠用 e.target === dialog 判断，但 Safari 15.4–17.6 完全不暴露 backdrop 节点，e.target 永远是 dialog 元素本身，无法区分点的是遮罩还是内容区。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 稳妥写法：只给「取消」按钮绑
dialog.close()，再单独监听keydown捕获Escape - 如果真要支持点击遮罩关闭，Safari 下必须降级：用
getBoundingClientRect()判断鼠标坐标是否落在弹窗可视区域外 - 绝对别写
dialog::backdrop { pointer-events: none }——这会让整个弹窗失焦，键盘用户卡死
分享功能怎么接进 dialog 里
分享弹窗的核心动作通常是「复制链接」或「调用 navigator.share()」，但这两者在微信内核 WebView 中都不可用：navigator.share() 直接报 undefined，document.execCommand('copy') 已废弃，得用 navigator.clipboard.writeText() 并处理权限拒绝。
- 微信环境必须降级为
position: fixed弹层，禁用所有依赖原生dialog行为的逻辑（比如 backdrop 点击、焦点锁定） - 复制链接按钮要加
async处理：navigator.clipboard.writeText(url)是 Promise，失败要 fallback 到textarea+select+execCommand（仅作保底） - 别在
dialog内放input[type="text"]自动聚焦——Safari 17.6 下首次打开可能 focus 失败，需setTimeout(() => input.select(), 0)
关闭后焦点和状态怎么收尾
原生 dialog.close() 不会自动把焦点还给触发按钮，键盘用户按完 Esc 就卡在空白处；dialog.returnValue 在 Safari 中始终为空字符串，不能用来判断用户点了哪个按钮。
- 关闭后必须手动调用触发按钮的
.focus()，否则违反无障碍要求 - 不要依赖
dialog.returnValue做业务分支，改用独立状态变量（如let shareAction = 'copy'）或事件委托 - 关闭后清空剪贴板提示文案、重置按钮 loading 状态——这些不会随
close()自动还原
最易被忽略的一点：微信里 dialog 的 ::backdrop 根本不渲染，且 showModal() 调用会静默失败。不运行时检测环境就硬上，弹窗在微信里会彻底消失——连 DOM 都没挂载成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
