exside/single-file-web-component.html

## single-file-web-component.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Single File Web Component</title>
</head>
<body>
  <template id=single-file>
    <style>
      h1 {
        color: red;
      }
    </style>

    <h1>Hello World</h1>

    <script type=module>
      class HelloWorld extends HTMLElement {
        constructor () {
          super()
          const template = document.getElementById('single-file')
          this.attachShadow({ mode: 'open' })
            .appendChild(template.content.cloneNode(true))
        }

        connectedCallback () {
          console.log('Why hello there 👋')
        }
      }

      customElements.define('hello-world', HelloWorld)
    </script>
  </template>

  <hello-world></hello-world>

  <script>
    const sf = document.getElementById('single-file')
    document.body.appendChild(sf.content.lastElementChild)
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Single File Web Component</title>
	</head>
	<body>
	<template id=single-file>
	<style>
	h1 {
	color: red;
	}
	</style>

	<h1>Hello World</h1>

	<script type=module>
	class HelloWorld extends HTMLElement {
	constructor () {
	super()
	const template = document.getElementById('single-file')
	this.attachShadow({ mode: 'open' })
	.appendChild(template.content.cloneNode(true))
	}

	connectedCallback () {
	console.log('Why hello there 👋')
	}
	}

	customElements.define('hello-world', HelloWorld)
	</script>
	</template>

	<hello-world></hello-world>

	<script>
	const sf = document.getElementById('single-file')
	document.body.appendChild(sf.content.lastElementChild)
	</script>
	</body>
	</html>