<dialog>+showModal()是最轻量语义化方案，但微信需降级为fixed弹层且禁用navigator.share()；手写div模态框存在ESC失效、焦点逃逸、无障碍缺失等问题。
直接用 <dialog> + showModal() 实现分享弹窗，是当前最轻量、语义正确且无障碍友好的方案；但微信环境必须降级为 position: fixed 弹层，且不能依赖 navigator.share()。
为什么不用 div + display: none 模拟 dialog
常见错误是手写一个 <div class="modal">，靠 JS 切换 display 或 visibility。这会导致：
- 按 Esc 键无法关闭，因为没触发原生模态行为
- Tab 键焦点会逃出弹窗，屏幕阅读器读不出“这是分享面板”
- 背景内容仍可被点击或聚焦，需手动加
inert或pointer-events: none，但兼容性差（如 Safari 15.3 不支持inert） -
dialog::backdrop自带半透明遮罩和点击关闭逻辑，手写要重复实现
如何正确初始化和控制 dialog 分享弹窗
必须用 JS 调用 showModal()，不能只设 open 属性——否则不会捕获焦点、不响应 ESC、也不触发 close 事件。
- HTML 结构必须是
<dialog><p>分享链接：</p><button id="copy-btn">复制</button></dialog>，不能套在其他容器里 - 首次显示前，确保元素已挂载到 DOM：
document.body.appendChild(dialogEl)（如果动态创建） - 关闭统一用
dialogEl.close()；不要用dialogEl.open = false，后者不移除 backdrop，也不派发close事件 - 给
<dialog>加role="dialog"和aria-modal="true"，尤其在旧版 Safari 中能提升可访问性
微信环境必须降级，且不能调用 navigator.share()
微信内置浏览器（X5 内核）对 <dialog> 支持极差：安卓部分机型 showModal() 静默失败，iOS 微信则完全不支持。更关键的是：navigator.share() 在所有微信 WebView 中始终返回 undefined 或抛错。
立即学习“前端免费学习笔记（深入）”；
- 检测是否在微信中：
ua.includes('MicroMessenger') - 检测是否支持：
'showModal' in HTMLDialogElement.prototype - 不满足任一条件时，改用
<div class="share-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;">，并手动管理焦点和 ESC 键 - 微信内禁止使用
transform动画（X5 渲染异常），用opacity+top控制显隐 - 分享按钮点开后，只提供“复制链接”和“长按识别二维码”两个确定路径，别尝试唤起微信原生分享
分享链接拼接必须逐段 encodeURIComponent
微博、Twitter 等平台的分享 URL 对编码极其敏感，错一处就导致中文截断、参数丢失或 404。
- URL 必须是绝对地址：
encodeURIComponent(window.location.href)，不能是/post/123 - 标题、描述等每一段都要单独编码：
const title = encodeURIComponent(document.title)，而不是encodeURIComponent(`title=${document.title}&url=${...}`) - 微博限制
title≤ 50 字符，超长需截断并加省略号 - 微信短链建议走后端服务（如
https://weixin.qq.com/q/xxx），前端 fallback 到https://share.weixin.qq.com/跳转页 - 复制到剪贴板优先用
navigator.clipboard.writeText()（需 HTTPS），降级用document.execCommand('copy')（已废弃但仍有兼容性）
真正难的不是写出来，而是让弹窗在微信里不白屏、在 Safari 里能按 Esc 关、在屏幕阅读器里被正确识别——这些细节一旦漏掉，用户要么点不动，要么根本不知道自己进了个分享面板。
