Width is undefined in custom element extending HTMLCanvasElement

user_11072709 0
Viewed 62

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?

custom-element canvas html javascript
2 Answers

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 custom element. You should use it as.

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

See MDN.

user_9940060

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>

user_54255620
Related