Kevin Powell - Community•2y ago

I want to extend builtin HTML element classes (I know why you shouldn't and cant)

class MyCanvas extends HTMLCanvasElement is obviously out of the question, but there's surely some hacky stuff we can do with .prototype. I can't figure it out though, at least not in such a way that TypeScript will agree with me. The general idea I'm thinking of is; 1. Hide all of this in a separate file 2. Create an unexposed anonymous class who's purpose is to document.createElement("canvas") and then impersonate it (I can't assign to this and I can't get [anything here]() {}, so I'm struggling with this step) 3. Assign the anonymous class to a const CanvasExtender with as unknown as HTMLCanvasElement 4. extend the fake HTMLCanvasElement that's technically a real canvas with a new class MyCanvas 5. export default MyCanvas and have a class who's this is my own custom properties and the actual properties of HTMLCanvasElement --- I know this is awful but I'm doing this for a toy project where it doesn't matter, for a bit more context I'm using app.use("/*.js", ...) to run tsc in terminal from an express server who's sole purpose is transpiling TypeScript on browser refresh. It's for fun, bad practice is allowed, hell is loose.

1 Reply

WillsterJohnsonOP•2y ago

...just remembered custom elements exist maybe there's something to that yeah that was really easy actually. you don't realise the solution until you ask someone else, where's my rubber duck... for anyone who stumbles across this and wants to know how;

class CanvasExtension extends HTMLCanvasElement {
  constructor() {
    super();
    // your code here
  }
  // your code here
}

customElements.define("canvas-io", CanvasExtension, { extends: "canvas" });

export const Canvas = customElements.get("canvas-io") as typeof CanvasExtension;

class CanvasExtension extends HTMLCanvasElement {
  constructor() {
    super();
    // your code here
  }
  // your code here
}

customElements.define("canvas-io", CanvasExtension, { extends: "canvas" });

export const Canvas = customElements.get("canvas-io") as typeof CanvasExtension;

Gaming

Programming

I want to extend builtin HTML element classes (I know why you shouldn't and cant)