1

I'm trying to write a function, which is related to the DOM, but the problem is , polymer calls the function before the DOM is loaded, and as expected it gives me an undefined error!

I was looking for an event like onComplete or anything like this, so that It could read my function after loading the DOM.

*** the best example is ready function in Jquery

P.S : "ready:" event in polymer doesn't work properly,

Soheil
  • 31
  • 8
  • this is just good for webComponentsready functions, I need something that waits till the whole dom is loaded and fires at the end of it – Soheil Nov 23 '16 at 16:26
  • Like.. window.onload ? http://stackoverflow.com/questions/4842590/run-function-when-page-is-loaded – Aks Nov 23 '16 at 16:42
  • What about attached function? Even you can call async function inside attached to do what you want with the dom... – Flavio Ochoa Nov 23 '16 at 17:02

2 Answers2

1

You could do something like this:

var domReady = function (func) {
    if ('complete' === document.readyState) {
        func();

        return;
    }

    document.addEventListener('DOMContentLoaded', function () {
        func && func();
    });
};

domReady(function () {
    // Your code
});
Hyddan
  • 1,297
  • 15
  • 24
1

In Polymer 2.0 you can use this into connectedCalback life cycle method:

connectedCallback(){
   super.connectedCallback();  
   Polymer.RenderStatus.beforeNextRender(this, function() {
       // All references to the dom elements into the web component
       // [...]
   });
}
manufosela
  • 469
  • 6
  • 8