Итак, в библиотеке, которую я создаю, которая использует пользовательские элементы, вам, очевидно, нужно определить класс в 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
.
Моя проблема заключается в том, что когда я пытаюсь использовать прокси-сервер в конструкторе и пытаюсь вернуть экземпляр объекта, я все равно получаю 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());