Parece que si se crea un elemento personalizado antes de definirlo, tendrá el constructor HTMLElement
y lo conservará incluso después de que se complete la definición.
Crear ese elemento nuevamente tendrá el constructor correcto, vea el ejemplo de código a continuación.
const comp = document.createElement("my-comp"); console.log('First element before definition: ', comp.constructor.name); customElements.define("my-comp", class MyComp extends HTMLElement { constructor() { super(); } myMethod() { return; } } ); console.log('First element after definition: ', comp.constructor.name); try { comp.myMethod() } catch (e) { console.error(e) } const secondComp = document.createElement("my-comp"); console.log('Second element: ', secondComp.constructor.name);
Si está seguro de haber definido el componente, puede usar !customElements.get(comp) && customElements.upgrade(comp)
para actualizar el componente de modo que su constructor cambie a la clase del elemento personalizado.
const comp = document.createElement("my-comp"); console.log('Component before definition: ', comp.constructor.name); customElements.define("my-comp", class MyComp extends HTMLElement { constructor() { super(); } myMethod() { return; } } ); console.log('Component after definition: ', comp.constructor.name); !customElements.get(comp) && customElements.upgrade(comp) console.log('Component after upgrade: ', comp.constructor.name);