Width is undefined in custom element extending HTMLCanvasElement

Question

I have a custom element that extends a canvas. But when I add the custom element to the dom, the width is undefined. Here is my code.

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

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

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

What am I doing wrong here?

Answer 1

You cannot use your custom tag name when specifying a custom element that extends a built-in. You must use the is attribute (see MDN)

Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property). For example <p is="word-count">, or document.createElement("p", { is: "word-count" }).

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

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

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