Search code examples
javascriptsafarimobile-safariweb-componentpolymer-1.0

WebComponentsReady fires too soon in safari?

So I'm working on a polymer desktop/mobile webapp. I have a WebComponentsReady listener attached to the global window object to ensure that the polymer html elements (and the polyfills they rely on) will be there and ready when my app's logic starts. Works fine in firefox (and of course chrome). Which brings us to safari/mobile safari.

In safari(s) the event seems to fire before polymer finishes doing its thing. Adding a setTimeout wrapper of a couple seconds (> 2 seems to be then minimumish) and everything works fine. The answer to this question seems outdated: the links are broken and the 'polymer-ready' event no longer seems to fire.

So how do I make sure in ALL browsers that polymer supports that

1) webcomponents are ready (native or polyfilled)
2) all of the polymer elements are finished being constructed and ready to have event listeners attached?

setTimeout is too iffy, I'd like a cleaner solution.

Solution

  • Use the dom-change event in Polymer 1.0 instead of 'polymer-ready'.

    index.html

    <body unresolved fullbleed layout vertical>
<template is="dom-bind" id="app">

    app.js

    var app = document.querySelector('#app');
app.addEventListener('dom-change', function() {
    console.log("Polymer is ready!");
    // do your thing
});