super-button.js

(function() {
    const template = document.createElement('template');

    template.innerHTML = `<div class="button">
      <slot name="icon"></slot> <span class="btnText"> ${this.labelText} </span> <slot></slot>
    </div>
    <style>
        .button {
            width: 150px;
            cursor: pointer;
            border-radius: 10px;
            text-align: center;
            padding: 5px;
            border: 1px solid #999;
            box-shadow: 0px 4px 2px -2px;
        }
        .grey { background: #e5e5e5 }
        .red { background: #ea5e4c }
        .yellow { background: #ffc60e }
        .blue { background: #93cefc }

        :host {
            display: inline-block;
            color: #000;
        }

        :host([color=red]) {
            margin-bottom:20px;
        }

        :host([color=red]) .button {
            border-color: var(--border-color)
        }
    </style>`;


    var importDoc = document.currentScript.ownerDocument;
    // ES6 Classes to Define the new Element Behaviour
    class SuperButton extends HTMLElement {
        constructor() {
            super();
            console.log('New Super Button object has been instantiated.');

            this.addEventListener('click', this._handleBtnClick.bind(this));

            // Attach a shadow root to <super-button>.
            const shadowRoot = this.attachShadow({mode: 'open'});
            shadowRoot.appendChild(template.content.cloneNode(true));
        }

        _handleBtnClick() {
          this.dispatchEvent(new CustomEvent('onBtnClick'));
        }

        connectedCallback() {
            this.updateColor(this.color);
        }

        disconnectedCallback() {
            // Disconnected means unmounting of the component
            console.log('Disconnected callback hook for any book keeping');
        }

        get color() {
            return this.getAttribute('color');
        }

        set color(value) {
            this.setAttribute('color', newColor);
        }

        updateColor(newValue, oldValue) {
            const defaultColor = 'grey';
            const allowedColors = ['red','yellow','blue'];
            const newColor = allowedColors.indexOf(newValue) > -1 ? newValue : defaultColor;
            const btnContainer = this.shadowRoot.querySelector('.button');
            if(btnContainer && oldValue) {
                btnContainer.classList.remove(oldValue);
            }
            if(btnContainer && newColor) {
                btnContainer.classList.add(newColor);
            }
        }

        static get observedAttributes() {
            return ['label-text', 'color'];
        }

        // Called for LabelText & Color Attribute
        attributeChangedCallback(name, oldValue, newValue) {
            switch(name) {
                case 'label-text':
                        if(this.shadowRoot.querySelector('.button') && newValue) {
                            // Updating the content inside div with 'button' class
                            this.shadowRoot.querySelector('.btnText').textContent = newValue;
                        }
                    break;
                case 'color':
                        this.updateColor(newValue, oldValue);
                    break;
            }
        }

        get labelText() {
            return this.getAttribute('label-text');
        }

        set labelText(value) {
            if(value) {
                this.setAttribute('label-text', value);
            }
        }
    }

        window.customElements.define('super-button', SuperButton);
    })();