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?

CodePudding user response：

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>

CodePudding user response：

I wonder if the HTMLCanvasElement can even be inherited from. It's an interesting question.

Anyway, since you are doing it, you are creating a customized built-in element & not an autonomous customlement. You should use it as.

<canvas is="render-area" width="500" height="500"></canvas>

See MDN.