polymer element lifecycle

lifecycle-element.html

<dom-module id="lifecycle-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <button id="btn">Hello world</button>
  </template>
  <script>
    Polymer({
      is: 'lifecycle-element',

      created: function(){
        this.log('created');
        this.addEventListener('click', function(){
          this.remove();
        });
      },

      ready: function(){
        this.log('ready');
        this.ticker = setInterval(this.tick.bind(this), 500);
      },

      attached: function(){
        this.log('attached');
      },

      detached: function(){
        this.log('detached');
        clearInterval(this.ticker);
      },

      attributeChanged: function(name, oldValue, newValue){
        console.log('%s was changed to %s from %s', name, newValue, oldValue);
      },

      tick: function(){
        this.setAttribute('data-id', Math.random());
      },

      updateAtrribute: function(cycle){
        this.setAttribute('class', cycle);
      },

      log: function(cycle){
        console.log("******" + cycle);
        this.$ && console.dir(this.$.btn);
        this.updateAtrribute(cycle);
      }
    });
  </script>
</dom-module>