is属性仅在whatwg规范列出的约20个原生标签（如button、canvas、table等）上生效；必须通过customelements.define()配合{extends:"xxx"}注册，且注册名与is值严格一致，类须继承对应内置元素，super()必须在constructor首行调用。
is属性只在特定原生标签上生效，不是所有标签都能用
浏览器根本不理 <div is="my-thing"> 或 <code><p is="highlight"></p> —— 这些标签不在 WHATWG 规范的可扩展白名单里。真正支持 is 的只有约 20 个原生标签，比如 button、canvas、table、tr、td、p、input 等。查证方式很简单：打开 WHATWG Customized Built-in Elements spec，看 “Elements that can be customized” 表格。
常见错误现象包括：<my-button></my-button> 被当成 HTMLUnknownElement，this.disabled 读不到、this.focus() 报 Illegal invocation、表单提交失效——根本原因就是用了自定义标签名，而不是 <button is="my-button"></button>。
必须用 customElements.define() 配 { extends: "xxx" } 注册
is 不是“开关”，它只是触发条件；真正决定元素类型的是注册时的 { extends: "button" } 选项。漏掉这个，哪怕 HTML 写了 <button is="my-btn"></button>，实例也还是 HTMLButtonElement，不会走你的类构造函数。
- 注册名和
is值必须完全一致：大小写、连字符、空格全部敏感 ——customElements.define("my-renderer", ...)对应<canvas is="my-renderer"></canvas>，写成"MyRenderer"或"myrenderer"都失败 - 类必须继承对应内置类：想扩
button就得class MyButton extends HTMLButtonElement，不能只继承HTMLElement - 注册代码必须在 HTML 解析前执行：放在
<script></script>标签里同步运行，或确保早于含is的标签；放在DOMContentLoaded之后就晚了
constructor 里 super() 是强制要求，不是可选步骤
继承 HTMLButtonElement 或 HTMLCanvasElement 后，constructor 第一行必须是 super()。这不是约定，是底层绑定 DOM 节点与 JS 实例的唯一入口。漏掉、挪后、或在 super() 前给 this.xxx 赋值，都会导致：
-
this.value、this.width、this.getContext()全部为undefined或null - 调用
this.focus()报TypeError: Illegal invocation - 实例
instanceof MyButton为false，但instanceof HTMLButtonElement仍为true
connectedCallback 里补 super() 没用 —— 构造阶段已结束，原型链已经断了。
Vue 的 :is 和原生 is 完全不兼容，混用必出问题
Vue 2 的 <button is="my-component"></button> 是模板编译器自己解析的语法糖，和 Web Components 规范无关；Vue 3 已移除该写法，只保留 <component :is=""></component>。而原生 is 属性依赖浏览器对 Customized Built-in Elements 的支持，两者机制完全不同。
在 Vue 模板里直接写 <button is="my-btn"></button>，结果往往是：
- Vue 劫持
is属性做组件替换，但 Web Components 注册未触发 - DOM 里既不是
HTMLButtonElement，也不是你的MyButton类实例 - 可访问性语义丢失、
disabled不同步、键盘导航失效
真正要复用原生行为（比如表单提交、focus 管理、ARIA 语义），就得绕过框架，用纯 HTML + customElements.define()，且确保注册时机和继承关系都严丝合缝。
