Show home component on ion-tabs: Stencil JS related issue

How can I show a certain component when the app starts on a Stencil JS app?

I tried doing this (it has worked in the past) on the app-root component:

    <ion-router useHash={false}>
      <ion-route component="app-tabs">
        <ion-route url="/" component="tab-home" />
    <ion-nav />

Then this on the app-tabs component:

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab-home">
        <ion-icon name="home-outline"></ion-icon>

      <ion-tab-button tab="tab-transactions">
        <ion-icon name="reader-outline"></ion-icon>

      <ion-tab-button tab="tab-categories">
        <ion-icon name="folder-outline"></ion-icon>

      <ion-tab-button tab="tab-accounts">
        <ion-icon name="person-outline"></ion-icon>

    <ion-tab tab="tab-home" component="app-home" />

    <ion-tab tab="tab-transactions" component="app-transactions" />

    <ion-tab tab="tab-categories" component="app-categories" />

    <ion-tab tab="tab-accounts" component="app-accounts" />


With no luck. I don’t know what I am doing wrong, please help.

If I clicked on any of the icons in the tab bar after the app starts it shows the page I am expecting, but I want to show tab-home at boot.

First screenshot is after boot and the second screenshot is after I click the Home Icon on the tab bar.

"devDependencies": {
    "@ionic/core": "^5.2.3",
    "@stencil/core": "^1.15.0",
    "@types/jest": "^26.0.3",
    "jest": "^26.1.0"

I also tried following the example on the StencilJS resources: the visited:

Ok, I found the problem and it was one related to Stencil JS.

In the @Component I was using the property of shadow: true and that is why it wasn’t showing the Home component.