Ready event for dynamic additives of polymer elements

Question

How to know when the polymer element is ready? Providing this:

It is dynamically added as:

var ele = document.createElement('my-custom-element'); document.body.appendChild(ele); 

So now, when I call ele.myCustomMethod() , it will fail because it is not ready yet (in FF / IE / Safari with webcomponent-lite.js)

What I'm doing right now is calling this.fire('ready') inside the function of the polymer element ready() and listening on it ele.addEventListener('ready', ()=>{ele.myCustomMethod();})

But this makes all the code very difficult to write. And sometimes I use $(body).html('<my-custom-element />') , and this complicates the situation.

My question is: Is there a better way to do this?

Thanks.

Answer 1

First you can listen to the WebComponentsReady event in a window.

Source: https://github.com/webcomponents/webcomponentsjs#webcomponentsready