details标签在ie及旧安卓webview中被识别为htmlunknownelement而非htmldetailselement，需通过constructor.name检测；降级处理须结合nomodule与ua判断，并补全aria状态、焦点管理和无障碍交互。
details 标签在 IE 和部分旧安卓 WebView 中会被当成未知元素，querySelector('details') 返回 null，样式失效，toggle 事件不触发——它不是“不工作”，而是根本没被识别。
检测是否被浏览器降级为 HTMLUnknownElement
不能只看页面有没有报错，得验证 DOM 实际类型：
- 用
document.querySelector('details').constructor.name检查：返回"HTMLDetailsElement"才是原生支持；返回"HTMLUnknownElement"就已降级 - 在 Elements 面板里观察标签是否渲染为
<details></details>，还是变成了<unknown></unknown>
- 不要依赖
typeof HTMLDetailsElement !== 'undefined' —— 这个全局构造函数在降级环境里依然存在，但不等于元素可用
用 nomodule + UA 检测双保险触发降级逻辑
仅靠 nomodule 不够，因为 IE 11 完全忽略该属性，仍会执行普通 <script></script>；而某些定制内核可能错误跳过 nomodule 脚本。必须叠加 UA 判断：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 检测
navigator.userAgent.includes('MSIE') || navigator.userAgent.includes('Trident')（注意新版 Edge 也带 Trident 字样，需额外排除Edge/） - 对微信 Android（
Micromessenger）和 iOS Safari ≤17.4，直接降级为<div class="accordion"> <button role="button" aria-expanded="false"></button><div class="panel"></div> </div> -
nomodule脚本里只放 ES5 兼容代码，且必须先加载 polyfill（如core-js/stable），再执行业务逻辑，否则Promise或Array.from会直接报错
降级后 DOM 结构与可访问性补全要点
手动实现的折叠组件容易漏掉关键无障碍细节，导致屏幕阅读器无法感知状态变化：
-
<button></button>必须带role="button"（否则 NVDA 读作“未命名按钮”），并动态同步aria-expanded值 - 展开后，用
setTimeout(() => panelEl.focus(), 0)把焦点移到第一个可聚焦子元素（如<input>或<a></a>），否则键盘用户会卡在按钮上 - 避免在降级结构中嵌套
<details></details>—— 微信 X5 内核连单层都解析失败，嵌套只会让整个菜单空白 -
<summary></summary>里禁用<img>或<svg></svg>，微信中它们会劫持点击；非要放，得加pointer-events: none
真正难的不是写两套 DOM，而是让降级后的 button 行为、焦点流、ARIA 状态和原生 details 保持一致——尤其在 iOS Safari 和微信里，连 open 属性读写都有延迟或静默失败，这时候靠 JS 同步状态反而比等浏览器更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
