Al tratar de convertir una "clase" js escrita usando prototipos en una clase ES6, la nueva versión se ejecuta sin errores pero no muestra ningún contenido en el DOM mientras que la versión anterior sí lo hace.
Los detalles de cómo funciona la clase no deberían ser importantes, sin embargo, estoy tratando de implementar un componente web personalizado en preact.
// common imports for completeness import { h, render, FunctionComponent, VNode } from "preact"; // old version: working ✅ function connectedCallback() { this._vdom = toVdom(this, this._vdomComponent); render(this._vdom, this._root); } function disconnectedCallback() { render((this._vdom = null), this._root); } function toVdom(element: HTMLElement, nodeName?: FunctionComponent<any>) { if (element.nodeType === 3) return element.data; if (element.nodeType !== 1) return null; const children = Array.from(element.childNodes).reverse().map(cn => toVdom(cn)); return h(nodeName || element.nodeName.toLowerCase(), {}, children); } function createCustomElement(Component: FunctionComponent<any>) { function PreactElement() { const inst = Reflect.construct(HTMLElement, [], PreactElement); inst._vdomComponent = Component; inst._root = document.body; return inst; } PreactElement.prototype = Object.create(HTMLElement.prototype); PreactElement.prototype.constructor = PreactElement; PreactElement.prototype.connectedCallback = connectedCallback; PreactElement.prototype.detachedCallback = disconnectedCallback; return PreactElement; } // new version: not working ❌ const createCustomElement = (Component: FunctionComponent<any>) => { return class PreactElement extends HTMLElement { private readonly _vdomComponent = Component; private readonly _root = document.body; private _vdom: VNode<any> | null = null; private static toVdom = (element: HTMLElement, nodeName?: FunctionComponent<any>) => { if (element.nodeType === 3) return element.data; if (element.nodeType !== 1) return null; const children = Array.from(element.childNodes).reverse().map(cn => PreactElement.toVdom(cn)); return h(nodeName || element.nodeName.toLowerCase(), {}, children); } connectedCallback = () => { this._vdom = PreactElement.toVdom(this, this._vdomComponent); render(this._vdom, this._root); } disconnectedCallback = () => { render((this._vdom = null), this._root); } }; };const createCustomElement = (Component: FunctionComponent<any>) => { return class PreactElement extends HTMLElement { private readonly _vdomComponent = Component; private readonly _root = document.body; private _vdom: VNode<any> | null = null; private static toVdom = (element: HTMLElement, nodeName?: FunctionComponent<any>) => { if (element.nodeType === 3) return element.data; if (element.nodeType !== 1) return null; const children = Array.from(element.childNodes).reverse().map(cn => PreactElement.toVdom(cn)); return h(nodeName || element.nodeName.toLowerCase(), {}, children); } connectedCallback() { this._vdom = PreactElement.toVdom(this, this._vdomComponent); render(this._vdom, this._root); } disconnectedCallback() { render((this._vdom = null), this._root); } }; };