demo/stack-navigator.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script
      type="module"
      src="../components/navigators/stack-navigator.js"
    ></script>
    <style>
      body {
        font-family: '-apple-system', 'HelveticaNeue';
      }
      a {
        color: #42d9c8;
        font-weight: bolder;
        display: block;
        padding: 20px;
        font-size: 24px;
      }
      button {
        width: 200px;
        margin: 51px;
        height: 50px;
        font-size: 20px;
      }
    </style>
  </head>
  <body style="margin:0;">
    <div style="height: 100vh; width: 100vw">
      <moko-stack-navigator>
        <moko-route path="path1" component="demo-el1"></moko-route>
        <moko-route path="path2" component="demo-el2"></moko-route>
        <moko-route path="path3" component="demo-el3"></moko-route>
      </moko-stack-navigator>
    </div>
  </body>
  <script>
    class Element1 extends HTMLElement {
      constructor() {
        super()
      }

      connectedCallback() {
        this.style.background = '#931621'
        this.style.height = '100%'
        this.style.width = '100%'
        this.innerHTML = `<a href="#path2">Path 1</a><a href="#path3">Path 2</a>`
      }
    }
    customElements.define('demo-el1', Element1)

    class Element2 extends HTMLElement {
      constructor() {
        super()
      }

      connectedCallback() {
        this.style.background = '#28464B'
        this.style.height = '100%'
        this.style.width = '100%'
        this.innerHTML = `<button onclick="history.back()">Back</button>`
      }
    }

    customElements.define('demo-el2', Element2)

    class Element3 extends HTMLElement {
      constructor() {
        super()
      }

      connectedCallback() {
        this.style.background = '#42D9C8'
        this.style.height = '100%'
        this.style.width = '100%'
        this.innerHTML = `<button onclick="history.back()">Back</button>`
      }
    }

    customElements.define('demo-el3', Element3)
  </script>
</html>