Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save exside/5a67c5e71114f49b56b38ae7c5e3b9b5 to your computer and use it in GitHub Desktop.
Save exside/5a67c5e71114f49b56b38ae7c5e3b9b5 to your computer and use it in GitHub Desktop.
Single file Web Component
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment