is属性是唯一合法方式，用于将原生HTML标签（如）升级为定制化内置元素；不支持等非法用法，且必须配合customElements.define()中{ extends: "canvas" }选项及正确构造函数调用。
is 属性是让浏览器把一个原生 HTML 标签“升级”为定制化内置元素（Customized Built-in Element）的唯一合法方式。它不是可选修饰，而是强制入口——没它，customElements.define() 注册的扩展类就完全不会生效。
为什么 <canvas is="my-renderer"></canvas> 能用，而 <my-renderer></my-renderer> 不行
浏览器解析 HTML 时，只认标准标签名。你写 <my-renderer></my-renderer>，哪怕已注册 class MyRenderer extends HTMLCanvasElement，DOM 中生成的仍是 HTMLUnknownElement 实例——width、getContext() 全部 undefined。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
is 属性的作用是显式声明：“这个 <canvas></canvas> 不是普通 canvas，它该走我注册的 MyRenderer 类逻辑”。只有这样，实例才真正继承 HTMLCanvasElement 原型链。
- 注册必须带
{ extends: "canvas" }，否则is无效 -
is的值（如"my-renderer"）必须与customElements.define()第一个参数完全一致（大小写敏感） -
data-is、data-custom等自定义属性毫无作用，浏览器不识别
is 只能配合特定原生标签使用
不是所有标签都支持 is。目前规范明确允许的只有： <button></button>、<input>、<textarea></textarea>、<select></select>、<option></option>、<meter></meter>、<progress></progress>、<canvas></canvas>、<audio></audio>、<video></video>、<img alt="is属性有什么用_HTML is自定义内置元素实例化探索" >、<table>、<code><tr>、<code><td>、<code><th>、<code><p></p>、<ol></ol>、<ul></ul>、<li>、<article></article>、<section></section> 等有限集合。
立即学习“前端免费学习笔记（深入）”；
比如你想扩展 HTMLDivElement，但 <div is="my-panel"> 是非法的——<code>div 不在规范允许列表中。此时只能退回到自主自定义元素（<my-panel></my-panel>），自己实现全部行为。
- Chrome、Firefox、Safari 当前均遵循该限制，无例外
- 试图对不支持的标签加
is，浏览器会静默忽略，不报错也不升级 - MDN 文档中 “HTML elements that support the
isattribute” 列表需定期核对，新增支持极慢
构造函数里 super() 必须调用，且不能晚于任何 DOM 访问
继承内置元素类（如 HTMLButtonElement）时，constructor() 中第一件事必须是 super()。它负责初始化底层 DOM 对象状态，比如 button.type、input.value 的初始值绑定。
如果漏掉或延迟调用，会出现看似奇怪的问题：元素渲染正常，但 this.value 读不到初始值、this.width 始终为 0、getAttribute("value") 返回字符串而 this.value 是空字符串。
-
super()必须在访问任何原生属性/方法前执行 - 不能在
connectedCallback()里补调super()—— 此时实例已创建完毕，再调无效 - 若需异步初始化（如加载配置），应放在
connectedCallback()或attributeChangedCallback()中
容易被忽略的兼容性与调试盲区
即使代码全对，is 行为在不同场景下仍可能失效：
- 服务端渲染（SSR）或静态 HTML 中写
<canvas is="my-renderer"></canvas>，但 JS 尚未执行注册，元素仍是普通HTMLCanvasElement；需确保customElements.define()在 DOM 解析前完成 - Shadow DOM 内部使用
is无问题，但若通过innerHTML动态插入含is的字符串，浏览器不会自动升级——必须用document.createElement("canvas", { is: "my-renderer" }) - DevTools 里看元素类型时，显示的是
HTMLCanvasElement，而非自定义类名；要确认是否升级成功，得查element.constructor.name是否等于你的类名
