原生 dialog 中嵌套 details 不会自动展开，需在 showmodal() 后手动设置 detail.open = true；summary 需加 tabindex="0" 并在 toggle 事件中 focus()；表单提交失败时 dialog 不自动关闭，须显式处理；微信 x5 内核需降级为 css 交互。
dialog 里嵌 details 不会自动展开，需手动控制 open 状态
原生 dialog 默认隐藏，即使内部放了 <details open></details>，在 Safari 或 Chrome 中首次打开 dialog 时，details 仍可能保持收起——因为 open 属性只在 DOM 解析时生效，而 dialog.showModal() 是运行时插入并聚焦的，部分浏览器不会重触发 details 的初始状态计算。
解决办法是：在 showModal() 后加一行 JS 强制设置 open：
const modal = document.getElementById('help-dialog');
const detail = modal.querySelector('details');
modal.showModal();
// 确保 details 展开
detail.open = true;
- 不要依赖
<details open></details>静态写法，尤其在动态插入或重复打开场景下 - 若 dialog 内有多个
details，需遍历设置.open = true，不能只设第一个 - Firefox 对此兼容性最好；Safari 16.4+、Chrome 115+ 已基本修复，但 iOS 17.5 仍偶发失效
details summary 点击后 dialog 不关闭，但焦点会丢失
details 的展开/收起是纯 UI 行为，不触发 dialog 的任何事件。用户点击 summary 时，dialog 依然保持打开，但键盘焦点可能从 summary 跳到 dialog 外部（比如上一个可聚焦元素），导致后续 Tab 导航中断。
关键补救点：
- 确保
summary本身可聚焦：<summary tabindex="0">帮助说明</summary> - 在
details的toggle事件中手动恢复焦点：detail.addEventListener('toggle', () => summary.focus()) - 避免在
summary内放<button></button>或<a></a>，否则会干扰原生 toggle 行为
表单提交后用 details 展示错误详情，但 dialog 不自动关闭
常见组合是：点击按钮打开 dialog → 用户填写表单 → 提交失败 → 在 dialog 内用 details 展示具体校验错误。这时容易误以为 reportValidity() 会联动关闭 dialog，其实不会。
必须显式处理关闭逻辑：
form.addEventListener('submit', e => {
if (!form.checkValidity()) {
e.preventDefault();
// 展开第一个错误项的 details
const firstErrDetail = form.querySelector('.error-details');
if (firstErrDetail) firstErrDetail.open = true;
// 但 dialog 仍开着 —— 这是预期行为
} else {
modal.close(); // 成功才关
}
});
-
dialog.close()不会抛错，即使 dialog 本来就没开，可安全调用 - 别在
invalid事件里调close()，那会导致刚弹出就关闭 - 如果希望“点击任意空白处关闭”，得自己监听
click并判断e.target === modal，dialog的 backdrop 点击关闭仅对showModal()有效
移动端微信 X5 内核下 details 在 dialog 中渲染错位
微信内置浏览器（X5 内核）对嵌套的 details 支持不完整：展开后内容高度计算异常，常出现截断、滚动条消失或 summary 错位。这不是 CSS 问题，而是内核解析 bug。
实测可行的降级方案：
- 检测环境：
if (/MicroMessenger/i.test(navigator.userAgent)) - 降级为纯 CSS 切换：
<div class="accordion"> <button class="accordion-toggle">…</button><div class="accordion-content">…</div> </div> - 用
max-height+transition模拟展开动画，避免依赖原生行为 - 保留
details结构但加hidden属性，仅在非 X5 环境下移除
这个组合真正难的不是写法，而是边界情况的判断时机——比如 dialog 打开后是否要等 afterrender（实际没有该事件），只能靠 requestAnimationFrame 延迟一次再操作 details.open。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
