Skip to content

Instantly share code, notes, and snippets.

@AVGP
Last active May 4, 2023 14:04
Show Gist options
  • Save AVGP/6600cf0c802905380c2acea6d7637df1 to your computer and use it in GitHub Desktop.
Save AVGP/6600cf0c802905380c2acea6d7637df1 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<body>
<template id="name-tag">
<style>
div.container {
background: red;
padding: 0.5em;
border-radius: 1em;
width: 300px;
}
div.avatar {
background: white;
border-radius: 0 0 0.5em 0.5em;
}
p, h2 {
background: white;
}
p {
background: white;
border-radius: 0.5em 0.5em 0 0;
padding: 0.2em 1em;
margin: 0;
}
h2 {
font-size: 2em;
text-align: center;
margin: 0;
padding: 0 0.5em;
border-radius: 0 0 0.5em 0.5em;
}
</style>
<div class="container">
<p>Hi, my name is <strong><slot name="name"></slot></strong></p>
<div class="avatar"><slot name="avatar"></slot></div>
</div>
</template>
<script>
class NameTag extends HTMLElement {
constructor() {
super()
let tpl = document.currentScript.ownerDocument.getElementById('name-tag')
let content = tpl.content.cloneNode(true)
let shadow = this.attachShadow({mode: 'open'})
shadow.appendChild(content)
}
}
window.customElements.define('name-tag', NameTag)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment