0

While working on my web component class I was thinking if there is any elegant way to have it more dynamic. Currently I have:

class WebComponent extends HTMLElement {
    private/protected/public methods, properties etc.
}

class MyComponent extends WebComponent {}

What I would like to achieve is being able to dynamically set which base element to be extended:

class MyComponent extends WebComponent(HTMLFormElement) {}

const component:WebComponent = new MyComponent(); // needed

if(component instanceof WebComponent) ... // needed

I tried a few ways including factoires and mixins, but ended up with anonymous class extensions, without an option to properly refer to WebComponent as a Typescript type in compile time or WebComponent instanceof in runtime.

Looking for good tips.

Yoz
  • 707
  • 6
  • 20
  • 1
    Note that Apple has always stated they will never implement *Customized Built-In Elements* in Safari: https://stackoverflow.com/questions/72090155/what-web-component-features-are-not-supported-by-safari-desktop-and-safari-ios – Danny '365CSI' Engelman Aug 04 '22 at 07:37
  • Noted, though, still looking for a solution. – Yoz Aug 04 '22 at 14:59

0 Answers0