如何创建自定义内置函数的实例？

Question

我正在为 vanilla JS 编写一个 JSX 工厂，但我似乎无法让定制的内置函数工作。

如果我定义一个

customElements.define('x-hi', class extends HTMLElement { })

我只能

document.createElement('x-hi')

要获得一个实例，我怎样才能获得这个实例：-

customElements.define('x-hello', class extends HTMLButtonElement { }, { extends: 'button' })

Answer 1

class Hello extends HTMLButtonElement { }
customElements.define('x-hello', Hello, { extends: 'button' });
new (customElements.get('x-hello'))() instanceof Hello
// --> true

您也可以使用普通的自定义元素来执行此操作，但您应该使用document.createElement ，因为稍后可能会在代码中定义自定义元素。

你可能在你的工厂里做这样的事情：

const el = document.createElement(tagName);
for (let attrName in attrs) el.setAttribute(attrName, attrs[attrName]);

当在已创建的HTMLButtonElement上设置is x-hello时，您无法更改它的原型以使其成为Hello