<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/users/14">Matthew</a></li>
  </ul>
</nav>

<on-page route="/" default>
  <template>
    <home-page :params="{{params}}"></home-page>
  </template>
</on-page>
<on-page route="/about">
  <template>
    <about-page></about-page>
  </template>
</on-page>
<on-page route="/users/:id">
  <template>
    <user-page :params="{{params}}"></user-page>
  </template>
</on-page>

<template id="home-template">
  <h1>Home</h1>

  <p>This is home! Welcome!</p>
</template>
<template id="about-template">
  <h1>About</h1>

  <p>This is about this page!</p>
</template>
<template id="user-template">
  <h1>User</h1>
  <h2>Name</h2>

  <p>Welcome {{id}}, this is kind of cool</p>
</template>

<script>
  [
    ['home-page', '#home-template'],
    ['about-page', '#about-template'],
    ['user-page', '#user-template']
  ].forEach(([tagName, template]) => {
    class Page extends Bram.Element {
      get template() {
        return template;
      }
    }

    customElements.define(tagName, Page);
  });
</script>