webcomponent template

'use strict';

class example_component extends HTMLElement {
    /* THIS RETURNS THE NAME OF OUR WEB COMPONENT */
    static get is() {
        return 'v-graph'
    }

  
    /* WE CAN SET UP GETS TO RETRIEVE THE ELEMENT NAMES BAM, EASY !  */

  
    get linkContent() {
        var link = document.querySelector('link[rel="import"]');
        var content = link.import;
        return content.querySelector("template[name='example_component']");
    }

    /*1.)  DEFINE CREATED CALLBACK - PART OF EL LIFECYCLE */
    createdCallback() {
        /* GET TEMPLATE FROM LINK CONTENT */
        var clone = document.importNode(this.linkContent.content, true);
        this.appendChild(clone);

        /* BIND STYLES */
        /* TODO IMPORT STYLE */
        /* WE CAN IMPORT STYLES */

        /* BIND CLICK EVENTS - BIND THIS TO SCOPE */
       
        /* BIND ATTR THROUGH ATTRIBUTE CHNAGED CALLBACK */
        /* ADD SHADOW */
        //var shadow = this.createShadowRoot();
        //shadow.innerHTML += "<div></div>";
        /* ATTATCH CB */
        this.attributeChangedCallback();

    }
    /*2.) Attribute changed is a web component lifecycle callback it will fire on creation as 
          an attribute is initially attatched to the web component */

    attributeChangedCallback() {

    }
    /*3.) ELEMENT IS BOUND TO DOM */
    attachedCallback() {
       
    }

    /* OUR CLASS METHODS */
   

};

document.registerElement(example_component.is, example_component);