Convert prototype to ES6 Class

Question

Trying to convert a js "class" written using prototypes into an ES6 class, the new version runs without errors but does not display any content in the DOM whereas the old version does.

The specifics of how the class works shouldn't be important, however, I'm trying to implement a custom web component in 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);
    }
  };
};

Answer 1

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);
    }
  };
};