Skip to content

Instantly share code, notes, and snippets.

Created April 27, 2018 11:40
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Basic component
<template id="my-custom-component">
<script type="text/javascript">
class MyCustomComponent extends HTMLElement {
constructor() {
const template = document.getElementById('my-custom-component');
const templateContent = template.content;
this.attachShadow({ mode: 'open' })
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);
<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