onBeforeEnter is not triggered and blocked the render of web component built by stencilJS

[kingdun3284]

I'm using the latest version of stenciljs. Step to reproduce: Example Router:

export class AppRoot {
  routerEl;
  router: Router;
  componentDidLoad() {
    this.router = new Router(this.routerEl)
    this.router.setRoutes({
      path: '/',
      component: "component-a"
    })
  }
  render() {
    return (
      <div ref={(el) => this.routerEl = el}>
      </div>
    );
  }
}

ComponentA:

export class ComponentA {
    @Method()
    async onBeforeEnter() {
        console.log("onBeforeEnter");
        return;
    }
    render() {
        return (
            <div>This is componentA</div>
        );
    }
}

Result: blank page and componentA is not showing. However other life cycle hook execute flawlessly. Guess this is due to the component cycle problem.

[MaherSoua]

Hello @kingdun3284 You have to extend from HTMLElement or any type based on it, otherwise your lifecycle (onBeforeEnter...) will never be triggered