index.html

<meta charset="utf-8">
<title>Mobile App</title>
<!-- Ionic -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>


<my-router></my-router>

<script>
  class MyRouter extends HTMLElement {
    constructor() {
      super()
      
      this.document = new URLSearchParams(window.location.search).get('shadow') === 'true'
        ? this.attachShadow({ mode: 'open' })
        : this
    }

    connectedCallback() {
      this.document.innerHTML = `
        <ion-router>
          <ion-route url="/" component="page-one"></ion-route>
          <ion-route url="/page-two" component="page-two"></ion-route>
        </ion-router>

        <ion-router-outlet></ion-router-outlet>
      `;
    }
  }

  class PageOne extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `
    <ion-content class="ion-padding">
      This is the content for page 1.
      <ion-router-link href="#/page-two">
        <ion-button>Go to Page 2</ion-button>
      </ion-router-link>
    </ion-content>`;
    }
  }

  class PageTwo extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `
    <ion-content class="ion-padding">
      This is the content for page 2.
    </ion-content>`;
    }
  }

  customElements.define('my-router', MyRouter);
  customElements.define('page-one', PageOne);
  customElements.define('page-two', PageTwo);
</script>