benfoxall/demo.html

## demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <nav>
      <ol>
        <li><a href="?demo=one">First Demo</a></li>
        <li><a href="?demo=two">Second Demo</a></li>
      </ol>
    </nav>


    <template data-demo="one">
      <h1>Demo 1!!</h1>
      <script type="module">
        document.body.style.background = 'red'
      </script>
    </template>

    <template data-demo="two">
      <h2>🎉</h2>
      <script type="module">
        import confetti from 'https://cdn.skypack.dev/canvas-confetti';
        confetti();
      </script>
    </template>

    <script>
      const demo = new URLSearchParams(location.search).get('demo')
      for (const template of document.querySelectorAll("template"))
        if (template.dataset.demo === demo)
          template.parentElement.insertBefore(template.content, template);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>

	<body>
	<nav>
	<ol>
	<li><a href="?demo=one">First Demo</a></li>
	<li><a href="?demo=two">Second Demo</a></li>
	</ol>
	</nav>


	<template data-demo="one">
	<h1>Demo 1!!</h1>
	<script type="module">
	document.body.style.background = 'red'
	</script>
	</template>

	<template data-demo="two">
	<h2>🎉</h2>
	<script type="module">
	import confetti from 'https://cdn.skypack.dev/canvas-confetti';
	confetti();
	</script>
	</template>

	<script>
	const demo = new URLSearchParams(location.search).get('demo')
	for (const template of document.querySelectorAll("template"))
	if (template.dataset.demo === demo)
	template.parentElement.insertBefore(template.content, template);
	</script>
	</body>
	</html>