Custom elements / es6

element.js

(function() {
  'use strict';
  /**
   * Class in es6
   * @constructor
   * @extends {HTMLElement}
   */
  wc.element.Test = class extends HTMLElement {

    constructor() {
      this.value_ = 0;
    }

    createdCallback() {
      console.log('Created callback');
      this.value_ = 0;
    }

    attachedCallback() {
      console.log('Attached callback', this.value_);
    }

    detachedCallback() {
      console.log('Detached');
    }

    set value(newv) {
      console.log('Value setter', newv);
      this.value_ = newv;
      this.dispatchEvent(new Event('change'));
    }

    get value() {
      console.log('Value getter');
      return this.value_;
    }

    attributeChangedCallback(name, oldv, newv, ns) {
      console.log('typeof ', typeof newv);
      console.log('Attribute changed', name, oldv, newv, ns);
    }
  };

  // Register the element.
  document.registerElement('pstj-test', wc.element.Test);

})();

howitworks.js

(function() {
  setTimeout(function() {
    var pstj = document.querySelector('pstj-test');
    pstj.addEventListener('change', function(e) {
      console.log('PSTJ change event');
    });
    console.log(pstj.value);
    pstj.value = 1;
    console.log(pstj.value);
    pstj.setAttribute('value', 2);
    console.log('get from attribute', pstj.getAttribute('value'),
        typeof pstj.getAttribute('value'));
    pstj.value = 3;
    console.log('get from getter', pstj.value);
    pstj.parentElement.removeChild(pstj);
    setTimeout(function() {
      document.body.appendChild(pstj);
      pstj.setAttribute('value', '3');
      console.log('get from attribute', pstj.getAttribute('value'),
          typeof pstj.getAttribute('value'));
      console.log('get from getter', pstj.value);
    }, 1000);
  }, 1000);
})();