扩展HTMLCanvasElement的自定义元素自定义方法无法调用问题求助

核心问题 #

你遇到的问题源于自定义内置元素的注册规范、实例获取时机及类型判断这几个关键点：

1. 注册时缺少必要配置
   注册继承自内置元素的自定义元素，必须在customElements.define的第三个参数中指定extends选项，明确要扩展的原生元素标签名。如果遗漏这个配置，浏览器无法将<canvas is="my-canvas">识别为你的自定义元素实例，只会返回原生HTMLCanvasElement对象，自然找不到自定义方法。
2. 元素获取时机不对
   如果在自定义元素定义完成前就获取页面元素，此时元素还未被浏览器升级为自定义实例，调用方法必然失败。
3. 原型方法添加方式错误
   若直接给HTMLCanvasElement.prototype添加方法，而非MyCanvas.prototype，那只会给所有原生canvas元素添加方法，而非你的自定义元素专属方法；即便给MyCanvas.prototype添加，前提也是注册配置正确，否则实例不会关联到这个原型。

修复步骤 #

1. 正确注册自定义内置元素
   确保注册代码包含extends配置：

   class MyCanvas extends HTMLCanvasElement {
     constructor() {
       super();
     }
     myFunction() {
       console.log('自定义方法执行');
     }
   }
   
   // 关键：第三个参数指定extends为'canvas'
   customElements.define('my-canvas', MyCanvas, { extends: 'canvas' });
   

2. 确保在DOM就绪后操作元素
   等待页面DOM加载完成，再获取元素并调用方法，避免元素未完成升级：

   document.addEventListener('DOMContentLoaded', () => {
     const canvas = document.querySelector('canvas[is="my-canvas"]');
     // 先判断实例类型，确保是自定义元素实例
     if (canvas instanceof MyCanvas) {
       canvas.myFunction();
     } else {
       console.error('canvas元素未正确升级为MyCanvas实例');
     }
   });
   

3. 验证原型方法的正确添加方式
   如果要通过原型添加方法，需针对MyCanvas的原型：

   MyCanvas.prototype.myFunction = function() {
     console.log('通过原型添加的自定义方法');
   };
   

   注意要放在customElements.define之前，避免注册后修改原型不生效。

内容的提问来源于stack exchange，提问作者TheCodeAspirer