What Is The Difference Between `HTMLImports.whenReady` And `window.addEventListener('WebComponentsReady', Function(e) {`

What is the difference between HTMLImports.whenReady and window.addEventListener('WebComponentsReady', function(e) {? Polymer's official documentation says: 'To define an element

Solution 1:

They are almost * the same: both are triggered at the same time.

So you can choose your favourite flavor between callback and Event.

Nota Bene: if, for some reasons, you reference the CustomElement.js polyfill alone (i.e. without the HTMLImports.js feature), only the WebComponentsReady event will be thrown.

(I prefer to use the Event Handler because in the first case you need to be sure the HTMLImports is defined, and because it is the only documented API here)

---

*: Of course they are different! The difference is stated in the quoted definitions.

• The latter is waiting for the Custom Elements to be instanciated. It is triggered by CustomElement.js polyfill.
• The first is waiting only for the Imports to be loaded and parsed. It is called by HTMLImports.js polyfill, just after {HTMLImportsLoaded} has been sent.

However in normal situation, because Custom Elements are instanciated as soon as they are registered, the 2 events will happen one after the other.

Chronological order

1. <link rel=import>.onload(),
2. {HTMLImportsLoaded} event,
3. HTMLImports.whenReady()
4. {WebComponentsReady} event

More here.