Polymer 3 element ready before children ready - how migrate?

Question

In a Polymer 1 element, ready was called when it's shadow dom was stamped and the shadow dom children's ready had been called. This meant that an element was ready when it was recursively ready.

In Polymer 3, ready tells nothing about readyness of shadow dom children. That makes sense insofar as elements may come from various frameworks with different lifecycle conventions. On the other hand, that's a drastic change in behavior in seemingly the same method, easily fooling you.

What are the recipes to migrate ready code in respect to that change?

Answer 1

Some patterns:

• Don't rely on children being ready to talk to them, use bindings

  // before
  ready(){
    this.$.child1.setState(x)
  }
  // after
  <template>
    <my-child id="child1" state="[[stateForChild]]">
    ...
  

• Wait for children being defined before talking to them

  ready(){
    customElements.whenDefined('my-child').then(()=>{
      this.$.child1.setState(x)
    })
  }
  

• Act on an event of the child

  // child
  this.dispatchEvent(new CustomEvent('i-am-ready'))
  // parent
  ready(){
    this.$.child1.addEventListener('i-am-ready', ...)
  }