javascript - Which one happens first? WebComponentsReady or dom-change? -

i started on polymer. there seems 2 events indicating content ready:

// listen template bound event know when bindings // have resolved , content has been stamped page app.addeventlistener('dom-change', function() {   console.log('our app ready rock!'); });  // see https://github.com/polymer/polymer/issues/1381 window.addeventlistener('webcomponentsready', function() {   // imports loaded , elements have been registered }); 

i wonder if necessary wrap them , put code inside, make sure document loaded before doing script, example:

app.addeventlistener('dom-change', function() {   window.addeventlistener('webcomponentsready', function() {     // scripts go here   }); }); 

however, don't know correct way in browsers. if webcomponentsready happens before dom-change, inside script never execute.

heck, might not necessary because polymer-starter-kit doesn't wrap them together. in case, types of script should go inside dom-change event , types of script should go inside webcomponentsready event?

use native ready callback described here.

<script>   (function() {     polymer({       is: 'example-element',       properties: {...},       ready: function() {         // access local dom element id using this.$         this.$.header.textcontent = 'hello!';       }     });   })(); </script>