I'm wondering what is is the importance of ready() method in polymer and what is the meaning of on-time initialization for such method and what is the differences between read() and connectedCallback() ???
I'm wondering what is is the importance of ready() method in polymer and what is the meaning of on-time initialization for such method and what is the differences between read() and connectedCallback() ???
They both have the same "goal". To provide a way of doing something after the element has been placed in the dom.
ready is polymer specific while connectedCallback is in the spec.
So if you have a vanilla webcomponent only connectedCallback is available. For Polymer Elements you may still use ready (especially if you convert an element from Polymer 1)
There are however some timing differences discribed here: https://www.polymer-project.org/2.0/docs/upgrade#custom-elements-apis
The ready callback, for one-time initialization, signals the creation of the element's shadow DOM. In the case of class-based elements, you need to call super.ready() before accessing the shadow tree.
The major difference between 1.x and 2.0 has to do with the timing of initial light DOM distribution. In the v1 shady DOM polyfill, initial distribution of children into is asynchronous (microtask) to creating the shadowRoot, meaning distribution occurs after observers are run and ready is called. In the Polymer 1.0 shim, initial distribution occurred before ready.