<html>
  <body>

    <a href="#">Reset</a>
    <a href="#a-hash-template">Test</a>
    <button>Test</button>
    <router2-content id="unique-id" hash="a-hash-template" hidden>
      The content to render
    </router2-content>

    <!--
    <router2-content id="unique-id" hash="a-hash-template" src="an-url-to-fetch">
    </router2-content>

    <router2-view for="unique-id">  ## optional tag
    </router2-view>
    -->

  </body>
  <script>
    document.querySelector('button').addEventListener('click', (e) => {
      location.hash = "myHash";
    });
  </script>
  <script src="router2-content.js"></script>
</html>

<html>
  <body>

    <a href="#">Reset</a>
    <a href="#a-hash-template">first case</a>
    <a href="#another-hash-template">second case</a>
    <button>Test</button>
    <router2-content hash="a-hash-template" hidden>
      The content to render
    </router2-content>

    <router2-content hash="another-hash-template" hidden>
      This is another hash
    </router2-content>

    <!--
    <router2-content id="unique-id" hash="a-hash-template" src="an-url-to-fetch">
    </router2-content>

    <router2-view for="unique-id">  ## optional tag
    </router2-view>
    -->

  </body>
  <script>
    document.querySelector('button').addEventListener('click', (e) => {
      location.hash = "myHash";
    });
  </script>
  <script src="router2-content.js"></script>
</html>

Add some complexity to the example
Add some complexity to the example
