对新html标签无效，因其仅响应js禁用而非浏览器不支持；应使用特性检测（如typeof htmldialogelement）配合动态降级或轻量polyfill。
新 HTML 标签（如 <dialog></dialog>、<details></details>）无法在旧浏览器中工作，<noscript></noscript> 对它完全无效，polyfill 也不是“加了就自动好”——得按场景选、配、测。
为什么 <noscript></noscript> 对新标签根本不起作用
<noscript></noscript> 只在 JavaScript 被禁用时生效，而现代降级问题主要来自浏览器不支持某标签（比如 IE11 渲染 <dialog></dialog> 就当普通 <div>，但没样式、没 API），和 JS 开关无关。这时候放 <code><noscript></noscript> 里什么也挡不住，用户照样看到错位或空白。
实操建议：
- 别把降级逻辑塞进
<noscript></noscript>，它不是兼容性开关 - 检测应基于
typeof HTMLDialogElement !== 'function'这类特性判断，而不是 JS 是否启用 - 如果真要 fallback 内容，直接用 JS 动态插入（例如：不支持
<dialog></dialog>就渲染一个带role="dialog"的<div>） <h3>选 polyfill 前先看这三件事</h3> <p>不是所有 polyfill 都适合你的项目。比如 <code>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></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 脚本，看页面是否退化成可操作状态——这才是降级是否成立的唯一标准。
