Which one happens first? WebComponentsReady or dom-change?

Question

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?

Possibly related question: http://stackoverflow.com/questions/21763690/polymer-and-webcomponentsready-event — aug, Jul 21 '15 at 06:57

score 1 · Accepted Answer · answered Jul 21 '15 at 07:06

Use the native ready callback as described here.

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

Which one happens first? WebComponentsReady or dom-change?

1 Answers1