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

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

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

How can I create instances of customized builtins?

javascript

dom

custom-element

native-web-component