Ionic router/tabs not loading stencil

Stencil
1

Can’t get component to load in tab using Stencil and Ionic (router, tabs). The code below is based on the Stencil Conference App.

Currently, I am able to switch between the tabs, but the button component does not load in tab-one.
When I paste the button html in the ion-tab element, it loads, but is not interactive (apparently behind the tabs).

After a week of exploring this topic, I’m not sure how to proceed. Thanks.

`<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - ionic-tab example</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script type="module"="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<script type="module"="https://cdn.jsdelivr.net/npm/@stencil/core@2.15.1/internal/stencil-core/index.cjs" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

</head>
<body>
<!-- partial:index.partial.html -->
<ion-app>

    <ion-tabs>
        <!-- Tab views -->
        <ion-tab tab="tab-one" component="one-component">one
            <ion-nav></ion-nav>
        </ion-tab>
        <ion-tab tab="two" component="two-component"> two </ion-tab>
        <ion-tab tab="three" component="three-component"> three </ion-tab>

        <!-- Tab bar -->
        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="tab-one">
                <ion-icon name="camera"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="two">
                <ion-icon name="headset"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="three">
                <ion-icon name="magnet"></ion-icon>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

    <ion-router useHash={false}>
        <ion-route url="/" component="tab-one">
            <ion-route component="page-one"></ion-route>
        </ion-route>
        <ion-route url="/two-page" component="two"></ion-route>
        <ion-route url="/three-page" component="three"></ion-route>
    </ion-router>
</ion-app>
<script type="module">
    import {
        Config,
        alertController,
        getMode,
        loadingController,
        modalController,
        toastController
    } from "@ionic/core";
    import {
        Component,
        Element,
        forceUpdate,
        Listen,
        Prop,
        State,
        h
    } from "@stencil/core";
    @Component({
        tag: "page-one"
    })
    export class PageOne {
        @Element() el: any;
        render() {
            return [ < ion - content >
                <
                ion - button shape = "round" > Round Button < /ion-button>, <
                /ion - content >
            ];
        }
    }
</script>
<!-- partial -->
//   <script type="module" src="./script.js"></script>

</body>
</html>
`
2

Ionic Router Does not load stencil content at all, should I file a bug?

  1. Create a Stencil App in VSCode
    1.1 npm init
    1.2 npm start
    Output from Stencil Router:
<stencil-router>
       <stencil-route-switch scrollTopOffset={0}>
        <stencil-route url="/" component="app-home" exact={true} />
         <stencil-route url="/profile/:name" component="app-profile" />
         </stencil-route-switch>
 </stencil-router>

image
image2497×1730 52.6 KB

  1. Change Stencil Router
    2.1 add import '@ionic/core';
    2.2 change to ion-router nodes
    2.3 note the redirect from “/” → the stencil router will not load content if this is missing.
    Output from the Ion-Router
    <ion-router useHash={false}>
    <ion-route-redirect from="/" to="/home" />
     <ion-route url="/" component="app-home" exact={true} />
     <ion-route url="/profile/:name" component="app-profile" />
 </ion-router>

image
image2512×1739 27.1 KB

  1. Based on Ionic-Stencil-Conference-App
    3.1 create renderRouter method
    3.2 move the routers (stencil/ionic) to renderRouter
    3.3 add tags to the router() function as root node. (this does not make a difference)
    3.4 in the main tag add {this.renderRouter()}

Expected: “Drop-in parity” between stencil router & ionic router as indicated in ion-router api docs

image
image694×489 15.8 KB

Actual: Same results as above (and in my codepen example). The Ionic Router does not load components. There are no error messages or any indication of why the router does not load content.

End-user outcome: Difficulty understanding why the API does not work as documented.

Best guess: the code to write the element to the dom is gone? I note the one example that works: Ionic Vanilla Js Router - CodeSandbox creates the inner HTML manually.