Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic component
<template id="my-custom-component">
<span></span>
</template>
<script type="text/javascript">
class MyCustomComponent extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-custom-component');
const templateContent = template.content;
this.attachShadow({ mode: 'open' })
.appendChild(templateContent.cloneNode(true));
this.displayLabel = this.shadowRoot.querySelector('span');
}
static get observedAttributes() {
return ['my-label'];
}
attributeChangedCallback(name, oldValue, newValue) {
switch (name) {
case 'my-label':
this.displayLabel.innerText = newValue;
}
}
}
customElements.define('my-custom-component', MyCustomComponent);
</script>
<my-custom-component my-label="This is my custom component"></my-custom-component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.