Which one happens first? WebComponentsReady or dom-change?

Question

I just started working at Polymer. Two events seem to indicate that the 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 they need to be combined and put the code inside to make sure the document is fully loaded before making any script, for example:

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

However, I do not know how to do it correctly in all browsers. If WebComponentsReady occurs before the dom change, inside the script is never executed.

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

Answer 1

ready .

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