is属性在HTML解析阶段决定元素构造器，需同步注册且严格匹配大小写，constructor中必须首行调用super()，否则退化为普通DOM节点。
is属性触发的是HTML解析阶段的元素构造，不是运行时补丁
浏览器在解析HTML字符串时，遇到<button is="my-button">这样的标签，会查表确认button是否在规范支持的可扩展列表里（目前约20个），再检查customElements.get("my-button")是否存在且注册时带{ extends: "button" }。只有这两步都通过，才会用你的类替代原生HTMLButtonElement构造器——这个决策发生在DOM树生成前，不可逆转。
常见错误现象：<button is="my-button">渲染后仍表现如普通按钮，控制台无报错，但instanceof MyButton为false——大概率是注册时漏了{ extends: "button" }，或customElements.define()调用晚于HTML解析（比如放在DOMContentLoaded之后）。
- 必须在
<script>标签内同步注册，或确保注册代码在<button is="...">所在HTML之前执行 -
is值大小写敏感，customElements.define("MyButton", ...)和<button is="mybutton">不匹配 - 浏览器对
is属性的处理不经过connectedCallback，所以不能靠它“事后升级”已存在的元素
super()调用失败直接切断原型链继承
你的类继承HTMLButtonElement后，constructor第一行必须是super()。这不是约定，而是底层强制：它触发浏览器内部的HTMLElement::initialize()逻辑，把DOM节点绑定到JS实例上，并初始化this.value、this.disabled等属性。漏掉或挪到后面，实例就只是空壳对象。
典型症状：<button is="my-button" value="submit">中this.value读出来是undefined，但this.getAttribute("value")能取到字符串；调用this.focus()报TypeError: Illegal invocation。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
super()只能在constructor里调，connectedCallback里补无效 - 不能在
super()前做任何this.xxx赋值，否则浏览器可能抛Illegal constructor - 继承
HTMLCanvasElement时漏super()，this.width/this.height永远为0，getContext()返回null
is属性不参与Shadow DOM或事件代理链路
is只决定元素的构造器和原型链，不影响后续行为封装。你仍然需要在constructor里手动this.attachShadow({ mode: "open" })，或者用connectedCallback监听插入时机。事件绑定也得自己写——is不会自动帮你把点击事件代理到Shadow根节点。
容易踩的坑：<button is="my-button">Click</button>绑了onclick，但Shadow DOM里的<span>被点中时，事件冒泡路径里没有my-button实例，因为Shadow边界阻断了冒泡。
- 想让内部点击触发外部监听，得在Shadow DOM里显式
dispatchEvent(new CustomEvent("click")) -
is扩展的按钮仍遵循原生表单提交逻辑，但如果你覆盖了click事件又没调super.click()，form.submit()可能失效 -
is不改变CSS选择器权重，button[is="my-button"]和button样式优先级相同
Vue/React里混用is属性会破坏预期行为
Vue 2的<button is="my-component">是模板编译期语法糖，和Web Components的is完全无关；Vue 3已移除该写法，仅保留<component :is="...">。React根本不识别is属性，会当普通HTML属性透传给DOM，但浏览器只在原生解析时响应它。
后果很直接：<button is="my-button">在Vue模板里，可能被Vue解析器忽略，导致注册未触发；或者被当作字符串属性塞进DOM，但浏览器早已完成解析，is失效。
- 在框架模板中用
is，必须确保组件定义早于框架挂载，且框架不劫持该属性 - 更安全的做法是用
<my-button>自定义标签，放弃is——虽然失去原生语义，但行为可控 -
is值必须与customElements.define()第一个参数完全一致，框架插值如<button :is="name">几乎必然失败
真正难的不是写customElements.define()，而是理解is只是一次性开关——它在HTML解析瞬间决定构造器，之后所有行为都依赖你是否正确继承、是否调用super()、是否处理好Shadow边界。漏掉任一环，元素就退化成普通DOM节点，连instanceof都过不了。
