HTML全局属性is在自定义内置元素Customized Built-in Elements中的扩展机制

is属性仅在WHATWG规范列出的约20个原生标签（如button、canvas、table等）上生效；必须通过customElements.define()配合{extends:”xxx”}注册，且注册名与is值严格一致，类须继承对应内置元素，super()必须在constructor首行调用。

is属性只在特定原生标签上生效，不是所有标签都能用

浏览器根本不理 <p is="my-thing"> 或 <p is="highlight"> —— 这些标签不在 WHATWG 规范的可扩展白名单里。真正支持 is 的只有约 20 个原生标签，比如 button、canvas、table、tr、td、p、input 等。查证方式很简单：打开 WHATWG Customized Built-in Elements spec，看 “Elements that can be customized” 表格。

常见错误现象包括：<my-button> 被当成 HTMLUnknownElement，this.disabled 读不到、this.focus() 报 Illegal invocation、表单提交失效——根本原因就是用了自定义标签名，而不是 <button is="my-button">。

必须用 customElements.define() 配 { extends: “xxx” } 注册

is 不是“开关”，它只是触发条件；真正决定元素类型的是注册时的 { extends: "button" } 选项。漏掉这个，哪怕 HTML 写了 <button is="my-btn">，实例也还是 HTMLButtonElement，不会走你的类构造函数。

• 注册名和 is 值必须完全一致：大小写、连字符、空格全部敏感 —— customElements.define("my-renderer", ...) 对应 <canvas is="my-renderer">，写成 "MyRenderer" 或 "myrenderer" 都失败
• 类必须继承对应内置类：想扩 button 就得 class MyButton extends HTMLButtonElement，不能只继承 HTMLElement
• 注册代码必须在 HTML 解析前执行：放在 <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"> 是模板编译器自己解析的语法糖，和 Web Components 规范无关；Vue 3 已移除该写法，只保留 <component :is="">。而原生 is 属性依赖浏览器对 Customized Built-in Elements 的支持，两者机制完全不同。

在 Vue 模板里直接写 <button is="my-btn">，结果往往是：

• Vue 劫持 is 属性做组件替换，但 Web Components 注册未触发
• DOM 里既不是 HTMLButtonElement，也不是你的 MyButton 类实例
• 可访问性语义丢失、disabled 不同步、键盘导航失效

真正要复用原生行为（比如表单提交、focus 管理、ARIA 语义），就得绕过框架，用纯 HTML + customElements.define()，且确保注册时机和继承关系都严丝合缝。