Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- add dependencies -->
<link rel="import" href="./dependent-element.html">
<!-- web component template -->
<template id="nameTagTemplate">
<style>
.outer {
border: 2px solid brown;
background: red;
}
.name {
color: black;
}
</style>
<div class="outer">
<div class="name">
Bob
</div>
<dependent-element></dependent-element>
</div>
</template>
<!-- web component class -->
<script>
class NameTag extends HTMLElement {
...
const shadowRoot = this.attachShadow({mode: 'open'});
const template = document.querySelector('#nameTagTemplate');
const clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);
...
}
customElements.define('name-tag', NameTag);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment