Creating New Element With A Dynamic Extends Class Expression

Is it possible to pass a class expression as parameter? Have not tried the eval route yet.. // CardtsElements.Zone contains a valid class expression // used to create a valid Zone

Solution 1:

You can pass your class expression as a class factory function:

• a (arrow) function,
• with one parameter (superclass): the class you want to extend,
• that will return the new derived class.

// CardtsElements.Zone contains a valid class expression// used to create a valid Zone Custom ElementvarCardtsElements = {
  'Zone': classextendsHTMLElement {
      constructor() { super() ; console.log('zone element created') }
      connectedCallback(){ console.log('connected Zone')}
      zone() { console.log( 'zone' ) }
  }
}

letextend = (source, name, classFactory) => 
    customElements.define('cardts-' + name, classFactory(CardtsElements[source])) 


// Create a new 'CARDTS-FOUNDATION' element extending 'CARDTS-ZONE'extend('Zone','foundation', superclass =>classextends superclass {
         constructor() { super() ; console.log(this.localName + ' created') }
         staticgetobservedAttributes() { return ['suit','draggable','drop'] }
         connectedCallback(){ 
            super.connectedCallback();
            console.log('connected',this.localName)
         }
         foundation() { console.log('foundation') }
     }
)

CF.zone()
CF.foundation()

<cardts-foundationid=CF>Cardts Foundation</cardts-foundation>