Which one happens first? WebComponentsReady or dom-change?

I just started on Polymer. There seems to be two events indicating content is ready:

// Listen for template bound event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('dom-change', function() {
  console.log('Our app is ready to rock!');

// See https://github.com/Polymer/polymer/issues/1381
window.addEventListener('WebComponentsReady', function() {
  // imports are loaded and elements have been registered

I wonder if it is necessary to wrap them together and put the code inside, to make sure that the document is fully loaded before doing any script, for example:

app.addEventListener('dom-change', function() {
  window.addEventListener('WebComponentsReady', function() {
    // scripts go here

However, I don't know what is the correct way to do so in all browsers. If WebComponentsReady happens before dom-change, the inside script never execute.

Heck, this might not even be necessary because the polymer-starter-kit doesn't wrap them together. In that case, which types of script should go inside dom-change event and which types of script should go inside WebComponentsReady event?

Use the native ready callback as described here.

  (function() {
      is: 'example-element',
      properties: {...},
      ready: function() {
        // access a local DOM element by ID using this.$
        this.$.header.textContent = 'Hello!';