我可以使用 customElements.define 定义两个自定义 html 元素吗？

问题描述

我编写了一个扩展 HTMLElement 的类，并准备使用 customElements.define 将元素绑定到 Dom。我认为可以根据需要创建尽可能多的元素，但不知何故，情况并非如此。

    let but = factory.createButtonElement('./img/question2.png');
    let butt = factory.createButtonElementt('./img/question2.png');
    customElements.define('sel-but',but);
    customElements.define('sel-butt',butt);
    /**
     * Also tried this
     * customElements.whenDefined('sel-but').then(()=>{
     *  customElements.define('sel-butt',butt);
     * })
     */

我的 HTML 看起来有这两个元素

    <sel-but></sel-but>
    <sel-butt></sel-butt>

错误

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry

如何在屏幕上显示两个按钮？

谢谢

解决方法

两个工厂方法都指向同一个类。并且因为 CustomElementRegistry 只能保存一个构造函数，所以它会返回错误。

,

使其成为 2 个定义，即扩展：

class ButElement extends HTMLElement {
     ...
}

customElements.define("sel-but",class extends ButElement{});
customElements.define("sel-butt",class extends ButElement{});


// I don't know your factory functions... something like this:
let klass = factory.createButtonElement('./img/question2.png');
customElements.define("sel-but",class extends klass );
customElements.define("sel-butt",class extends klass );