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!

I think you're going to have trouble setting an attribute in the constructor. Attributes cannot be imposed by the element, they can only come from the HTML during construction, or via .setAttribute() after construction. — stephband

Supersharp Supersharp · Accepted Answer · 2017-02-24T07:28:17

customElements.define('my-el', MyEl) must be called only once to tell the browser you have a new <my-el> tag (aka to define a custom element).

Then you can create multiple elements just by using new:

const newMe1 = new MyEl();
const newMe2 = new MyEl();

Or createElement():

const newMe1 = document.createElement( 'my-el' )
const newMe2 = document.createElement( 'my-el' )

Or, in the html code:

<my-el></my-el>
<my-el></my-el>

How to define a more customElements for same Class

1 Answers