title: polymer elements registration and lifecycle (created and ready called twice)
body: <p>Polymer documentation states that elements initialization order is</p>
  
  <ul>
  <li>created callback. </li>
  <li>Local DOM initialized (This means that local DOM
  children are created, their property values are set as specified in
  the template, and ready has been called on them). </li>
  <li>ready callback.</li>
  <li>factoryImpl callback. attached callback.</li>
  </ul>
  
  <p>But here is what i got run</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;!-- &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt; --&gt;
      &lt;link rel="import" href="bower_components/polymer/polymer.html"/&gt;
      &lt;script&gt;
          jsElement=Polymer({
              is:"js-element",
  
              extends:'input',
  
              hostAttributes: {
                'string-attribute': 'Value',
                'boolean-attribute': true,
                tabindex: 0
              },//this results in &lt;js-element string-attribute="Value" boolean-attribute tabindex="0"&gt;&lt;/js-element&gt; refer https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-serialization
  
              //callback
              created:function(){
                  this.textContent="Helloooo..."+this.b;//this.b y undefined
                  this.style.border = '1px solid red';
                  console.log(this.localName + '#' + this.id + ' was created');
              },
  
              ready: function() {
                  console.log(this.localName + '#' + this.id + ' has local DOM initialized');
              },
  
              attached: function() {
                  console.log(this.localName + '#' + this.id + ' was attached');
              },
  
              detached: function() {
                  console.log(this.localName + '#' + this.id + ' was detached');
              },
  
              attributeChanged: function(name, type) {
                  console.log(this.localName + '#' + this.id + ' attribute ' + name +
                    ' was changed to ' + this.getAttribute(name));
              },
  
              //provide add variable property to constructor
              factoryImpl:function(a,b){
                  this.b=b;
                  console.log(this.b);
              }
          });
  
          //working without both if no variable required
          var element=new jsElement(2,"aaaa");
          //or
          //var element=document.createElement('js-element');
      &lt;/script&gt;
      &lt;link rel="import" href="bower_components/iron-icon/iron-icon.html"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--To run js-element tag comment extends input --&gt;
      &lt;!-- &lt;js-element&gt;yo&lt;/js-element&gt; --&gt;
      &lt;input is="js-element"&gt;&lt;/input&gt;
      &lt;iron-icon src="2.jpg"&gt;&lt;/iron-icon&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i get output as</p>
  
  <pre><code>input# was created
  input# has local DOM initialized
  input# attribute string-attribute was changed to Value
  input# attribute boolean-attribute was changed to 
  input# attribute tabindex was changed to 0
  aaaa
  input# was created
  input# has local DOM initialized
  input# attribute string-attribute was changed to Value
  input# attribute boolean-attribute was changed to 
  input# attribute tabindex was changed to 0
  input# was attached
  </code></pre>
  
  <p>Can someone please help me understand why create and ready are being called twice?
  Also why is the value of this.b undefined in created function even second time around?</p>