is 属性在旧浏览器中完全失效，因 IE、Edge Legacy、Safari ≤15.6、Firefox ≤63 均不支持且无 polyfill 可补，其依赖 HTML 解析阶段介入，运行时 JS 无法模拟。
is 属性无法用于旧版本浏览器的 DOM 渐进式扩展——它在 IE、Edge Legacy、Safari ≤ 15.6、Firefox ≤ 63 等环境中根本不存在，且无 polyfill 可补。
为什么is在旧浏览器里完全失效
is 是 WHATWG HTML 规范中 Customized Built-in Elements 的一部分，依赖底层解析器在元素创建时介入构造流程。IE 所有版本（包括 IE11）不支持该特性；Edge Legacy（≤ 18）未实现；Safari 直到 16 才完整支持 is + extends 组合；Firefox 在 63+ 才启用，默认需手动开启 dom.webcomponents.customelements.enabled（已废弃）。没有运行时 JS 补丁能模拟这个 HTML 解析阶段的行为。
- 写
<button is="my-btn">在 IE 中解析为普通HTMLButtonElement，customElements.define()调用直接被忽略 - 即使加载了
webcomponentsjspolyfill，它也只补customElements和 Shadow DOM，不实现is属性逻辑 -
document.createElement("button", { is: "my-btn" })在旧浏览器报错：参数对象不被识别，降级为document.createElement("button")
旧浏览器真正可用的渐进式扩展路径
面向兼容性，必须放弃 is，改用显式自定义标签 + 特性检测 + 降级兜底。核心是让旧浏览器拿到可工作的 DOM 结构，新浏览器再叠加增强。
- 用
<my-button>替代<button is="my-button">：所有浏览器都接受未知标签，IE8+ 可通过document.createElement("my-button")触发样式识别 - 在脚本入口处做能力检测：
if ("customElements" in window && "is" in document.createElement("div"))—— 注意："is" in element在旧浏览器返回false，不能只测customElements - 对旧环境，直接操作
my-button的innerHTML或textContent模拟按钮行为，绑定原生事件，手动同步disabled、form关联等逻辑 - 避免依赖
this.value、this.focus()等原生按钮 API，改用this.getAttribute("value")和this.querySelector("button").focus()等降级访问
is 和降级方案混用时最危险的坑
试图“兼顾”新旧写法反而导致行为断裂，尤其在 SSR 或动态渲染场景下。
立即学习“前端免费学习笔记（深入）”；
- Vue/React 模板中同时存在
<button is="my-btn">和<my-button>：Vue 2 会劫持is属性做组件替换，但旧浏览器没注册，结果渲染出空按钮；新浏览器又因未调用super()导致this.disabled失效 - 服务端输出
<button is="my-btn">，客户端 JS 延迟执行customElements.define()：IE 和 Safari 15.6- 渲染后永远是原生按钮，hydrate 不触发升级（is不参与 hydration） - 用
data-is试图模拟is行为：浏览器完全忽略，JS 里读取el.dataset.is后手动替换 DOM —— 这破坏了表单提交、焦点管理、可访问性语义，且无法复用HTMLButtonElement的内置状态同步机制
真正需要兼容旧浏览器时，is 不是起点，而是终点——先确保 <my-button> 在 IE11 下能点击、能提交、能 disabled，再在现代浏览器里用 is 把它“升级”回原生按钮语义。任何跳过降级基础、直接堆砌 is 的做法，都会在第一个 IE 用户打开页面时暴露问题。
