is属性仅对特定原生标签（如button、canvas等）生效，需配合customElements.define()的{extends:"xxx"}注册；任意标签加is无效，且Vue的:is与原生is机制互不兼容。
is属性只在Customized Built-in Elements中生效，不是通用“增强”开关
浏览器不会因为你在任意标签上加 is 属性就自动升级行为。它只对明确支持的原生标签（如 button、canvas、table、tr 等）起作用，且必须配合 customElements.define() 的 { extends: "xxx" } 选项注册。写 <div is="my-thing"> 或 <p is="highlight"> 完全无效——这些标签不在规范允许列表里。
常见错误现象：
-
<my-button>被当成HTMLUnknownElement，click事件能绑，但form关联、disabled同步、focus()行为全失效 - 注册时漏掉
{ extends: "button" }，哪怕 HTML 里写了<button is="my-button">，实例仍是普通HTMLButtonElement，不走你的类逻辑
Vue 的 :is 和 HTML 原生 is 是两套互不兼容的机制
Vue 2 中 <button is="my-component"> 是 Vue 自己解析的语法糖，和 Web Components 规范无关；Vue 3 已移除该用法，仅保留 <component :is="..."> 形式。而原生 is 属性是 HTML 标准的一部分，用于 Customized Built-in Elements，两者不能混用。
使用场景差异：
立即学习“前端免费学习笔记（深入）”；
- 原生
is：目标是复用内置元素能力（比如让自定义按钮保有表单提交逻辑、可访问性语义、键盘导航），必须继承HTMLButtonElement并用<button is="xxx"> - Vue
:is：解决 HTML 解析限制（如<table>内不能直接放自定义组件），本质是让 Vue 渲染器绕过浏览器 HTML 解析器，不改变 DOM 元素类型 - 同时用会出问题：比如在 Vue 模板里写
<button is="my-btn">，Vue 2 可能劫持该属性做组件替换，但 Web Components 注册未触发，结果既不是原生按钮也不是你期望的定制类
is值必须与 customElements.define() 第一个参数严格一致
大小写、连字符、空格全部敏感。注册了 customElements.define("my-renderer", MyRenderer, { extends: "canvas" })，那 HTML 里只能写 <canvas is="my-renderer">。写成 <canvas is="MyRenderer"> 或 <canvas is="myrenderer"> 都不会匹配。
容易踩的坑：
- 误用
data-is替代is—— 浏览器完全忽略，只是个字符串属性 - 在服务器端渲染（SSR）时，若 JS 尚未执行
define()，is属性存在但无效果，DOM 是普通原生元素；hydrate 时也不会自动“补救”，得确保注册早于元素挂载 - 动态设置
el.setAttribute('is', 'xxx')不会切换类——元素初始化后is值即固化，改了也白改
支持的原生标签有限，且部分浏览器实现不一致
目前明确被 HTML 标准允许的 is 扩展标签包括：button、input、textarea、select、option、meter、progress、canvas、video、img、table、tr、td、th、p。但实际支持度有差异：
- Firefox 对
<tr is="xxx">支持较晚，旧版可能静默失败 - Safari 曾长期不支持
<canvas is="xxx">，直到 Safari 16.4+ 才稳定可用 -
<img is="xxx">在所有主流浏览器中都可用，但要注意：src加载、onload触发时机与普通img一致，你的类不能覆盖这些底层行为
最稳妥的做法是：只在明确需要继承内置 API（如 getContext()、checkValidity()、setRangeText()）的场景下用 is，其他情况优先考虑 Autonomous Custom Elements（<my-button>）或封装组件，避免被支持性卡住。
