<noscript>对新HTML标签无效，因其仅响应JS禁用而非浏览器不支持；应使用特性检测（如typeof HTMLDialogElement）配合动态降级或轻量polyfill。
新 HTML 标签（如 <dialog>、<details>）无法在旧浏览器中工作，<noscript> 对它完全无效，polyfill 也不是“加了就自动好”——得按场景选、配、测。
为什么 <noscript> 对新标签根本不起作用
<noscript> 只在 JavaScript 被禁用时生效，而现代降级问题主要来自浏览器不支持某标签（比如 IE11 渲染 <dialog> 就当普通 <div>，但没样式、没 API），和 JS 开关无关。这时候放 <noscript> 里什么也挡不住，用户照样看到错位或空白。
实操建议：
- 别把降级逻辑塞进
<noscript>，它不是兼容性开关 - 检测应基于
typeof HTMLDialogElement !== 'function'这类特性判断，而不是 JS 是否启用 - 如果真要 fallback 内容，直接用 JS 动态插入（例如：不支持
<dialog>就渲染一个带role="dialog"的<div>）
选 polyfill 前先看这三件事
不是所有 polyfill 都适合你的项目。比如 dialog-polyfill 依赖 CSS 注入和全局事件代理，而你用 Shadow DOM 封装组件，它就可能失效；又或者你在 Next.js / SSR 环境里直接 import，会报 window is not defined。
实操建议：
- 确认 polyfill 是否支持你的运行环境（SSR？微前端？Web Component？）
- 检查它是否修改原生原型（如给
HTMLElement.prototype.showModal赋值）——某些安全策略（CSP）会阻止 - 优先用「按需加载」：只在检测到不支持时才
import('dialog-polyfill').then(...)，避免拖慢现代浏览器首屏
手动降级比硬套 polyfill 更可控的场景
对简单语义标签（如 <time datetime="2024-05-20">今天</time>），polyfill 没意义——它本就不影响渲染，只是增强语义。但像 <select> 的 size 属性在 Safari 旧版有 bug，这时写个 if ('size' in HTMLSelectElement.prototype) 判断再加 class 控制高度，比引入整套表单 polyfill 更轻量。
实操建议：
- 优先用特性检测 + CSS fallback（例如
display: dialog不支持？补.dialog-fallback { position: fixed; z-index: 1000; }） - 对交互逻辑，封装成函数（如
showDialog(el)），内部根据支持度调用原生方法或模拟逻辑 - 避免在 HTML 源码里写两套结构（一套新标签 + 一套 div class），维护成本高且容易不同步
真正麻烦的从来不是“有没有 polyfill”，而是它和你的构建链路、样式隔离、事件流是否打架。上线前务必在目标最低浏览器里打开 DevTools，手动删掉 polyfill 脚本，看页面是否退化成可操作状态——这才是降级是否成立的唯一标准。
