How to define a more customElements for same Class

Question

I jsut tried to define new Custom Elements.

// the class
class MyEl extends HTMLElement {
  constructor() {
    // mandatory super call to upgrade the current context
    super();
    // any other Class/DOM related procedure
    this.setAttribute('custom-attribute', 'value');
this.innerText = 'new element';
  }
}

// its mandatory definition
customElements.define('my-el', MyEl);

// the JS way to create a custom element
const newMe = new MyEl();


document.body.appendChild(newMe);

Defining a new element of the same class will cause an error:
"Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
this constructor has already been used with this registry"

But i want to define new elements for same class. Could you suggest a way to display multiple items from the same class (MyEl).
Thank in advance!

Answer 1

Just try with an anonymous constructor and extend your MyEl:

class MyEl extends HTMLElement {
  // your definitions
}

customElements.define("my-better-element", class extends MyEl { })
customElements.define("my-second-element", class extends MyEl { })