如何为相同的 Class 定义更多自定义元素

Question

我只是尝试定义新的自定义元素。

// 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);

定义相同的新元素class会导致错误：
"Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
this constructor has already been used with this registry"

但我想为相同的 class 定义新元素。你能建议一种方法来显示来自同一个 class (MyEl) 的多个项目。
提前致谢！

Answer 1

customElements.define('my-el', MyEl) 必须只调用一次以告诉浏览器您有一个新的 <my-el> 标记（也就是定义自定义元素）。

然后您可以创建多个元素，只需使用new:

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

或createElement()：

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

或者，在 html 代码中：

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

Answer 2

只需尝试使用匿名构造函数并扩展您的 MyEl：

class MyEl extends HTMLElement {
  // your definitions
}

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

如何为相同的 Class 定义更多自定义元素

How to define a more customElements for same Class

javascript

web-component

custom-element