因此,在我创建的使用自定义元素的库中,您显然需要在实例化之前在CustomElementsRegistry
中定义类。
截至目前,这是由装饰者解决:
class Component extends HTMLElement {
static register (componentName) {
return component => {
window.customElements.define(componentName, component);
return component;
}
}
}
@Component.register('my-element')
class MyElement extends Component { }
document.body.appendChild(new MyElement());
但是,我希望在实例化类时自动注册自定义元素(这样作者就不必将装饰器添加到他们编写的每个组件中)。这可以通过Proxy
完成。
但问题是,当我尝试在构造函数上使用Proxy并尝试返回目标的实例时,我仍然得到Illegal Constructor
,就好像该元素从未在注册表中定义一样。
这显然与我在代理中实例化类的方式有关,但我不确定如何做到这一点。我的代码如下:
请在最新的Chrome中运行:
class Component extends HTMLElement {
static get componentName () {
return this.name.replace(/[A-Z]/g, char => `-${ char.toLowerCase() }`).substring(1);
}
}
const ProxiedComponent = new Proxy(Component, {
construct (target, args, extender) {
const { componentName } = extender;
if (!window.customElements.get(componentName)) {
window.customElements.define(componentName, extender);
}
return new target(); // culprit
}
});
class MyElement extends ProxiedComponent { }
document.body.appendChild(new MyElement());
如何继续代理内部的继承链而不会丢失我实例化MyElement
类的事实的上下文,以便它不会抛出Illegal Constructor
异常?
有2个问题:
new target()
创建了LibElement
实例,该实例未注册为自定义元素。在这里你得到Illegal Constructor
错误。LibElement
结果DOM元素将是<lib-element>
,因为你调用new target
,此时javascript不知道子类。我找到的唯一方法是使用Reflect
API来创建对象的正确实例。
class LibElement extends HTMLElement {
static get componentName () {
return this.name.replace(/[A-Z]/g, char => `-${ char.toLowerCase() }`).substring(1);
}
}
const LibElementProxy = new Proxy(LibElement, {
construct (base, args, extended) {
if (!customElements.get(extended.componentName)) {
customElements.define(extended.componentName, extended);
}
return Reflect.construct(base, args, extended);
}
});
class MyCustomComponent extends LibElementProxy {}
class MyCustomComponentExtended extends MyCustomComponent {}
document.body.appendChild(new MyCustomComponent());
document.body.appendChild(new MyCustomComponentExtended());
我真的很喜欢代理构造函数的自定义元素自动注册的想法
你非常接近解决方案,唯一的问题是本机HTMLElement
不能用new
关键字实例化,必须通过document.createElement
创建。您可以重用所有内容,只替换代理中construct
方法的返回值:
class Component extends HTMLElement {
static get componentName() {
return this.name.replace(/[A-Z]/g, char => `-${ char.toLowerCase() }`).substring(1);
}
}
const ProxiedComponent = new Proxy(Component, {
construct(target, arguments, extender) {
const {
componentName
} = target;
if (!window.customElements.get(componentName)) {
window.customElements.define(componentName, extender);
}
return document.createElement(target.componentName); // Properly constructs the new element
}
});
class MyElement extends ProxiedComponent {}
document.body.appendChild(new MyElement());