自定义元素继承HTMLCanvasElement后width属性为何为undefined？

你的问题出在内置扩展自定义元素的使用方式错误：

通过{ extends: 'canvas' }定义的是基于原生canvas扩展的自定义元素，这类元素不能直接使用<render-area>这种新标签名，必须在原生<canvas>标签上通过is属性指定自定义元素名，否则浏览器不会将其识别为canvas的扩展实例，自然无法访问canvas固有的width/height属性。

修正后的代码 #

JavaScript 部分（无需修改）

class Renderer extends HTMLCanvasElement {
  constructor() {
    super();
  }
}

customElements.define("render-area", Renderer, { extends: 'canvas' });

HTML 部分（修改标签写法）

<canvas is="render-area" width="500" height="500" style="border: 3px solid black"></canvas>
<button onclick="console.log(document.querySelector('canvas[is=\"render-area\"]').width)">log width of render area</button>

补充说明 #

如果一定要使用独立的<render-area>标签，那不能直接继承HTMLCanvasElement，需要在自定义类内部创建canvas元素并挂载到自定义元素中，同时手动实现width/height的getter和setter方法来同步内部canvas的属性，但这种方式不属于内置元素扩展，而是独立自定义元素的实现逻辑。

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