javascript - 如何为同一个类定义更多的自定义元素

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

定义同一个类的新元素会报错:
“未捕获的 DOMException:无法在‘CustomElementRegistry’上执行‘define’:
此构造函数已用于此注册表”

但我想为同一个类定义新元素。您能否建议一种显示同一类 (MyEl) 中的多个项目的方法。
提前致谢!

Answer 1

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

class MyEl extends HTMLElement {
  // your definitions
}

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