Order of lifecycle events in Polymer.dart

Question

I have a problem with differences in order of lifecycle events in Polymer.dart

Events happen in different order when dart code is run in Dartium and when compiled JavaScript is run in Chrome.

I have 2 Polymer elements: Parent and Child and I added output in created and enteredView functions.

The output is: Dartium:

ChildElement created
ChildElement enteredView. Variable value: InitMsg
ParentElement created
ParentElement enteredView

Chrome:

ChildElement created
ParentElement created
ParentElement enteredView
ChildElement enteredView. Variable value: InitMsg

The questions are:

• is this result completely arbitrary, or is there some order that can be relied upon?
• if a variable is assigned in Parent's created method, new value it is obviously not visible in Child's enteredView. I need to do some calculations based on new value. Is PathObserver in child the only solution to get notified of this assignment, or is there some moment in time/lifecycle callback happening after Parent's created() when this value is visible in child?

My code:

parentelement.dart:

import 'package:polymer/polymer.dart';

@CustomTag('parent-element')
class ParentElement extends PolymerElement {
  @observable String msg = "InitMsg";

  ParentElement.created() : super.created() {
    print('Parent created');
    msg = "Changed msg";
  }

  @override
    void enteredView() {
      super.enteredView();
      print('ParentElement enteredView');     
    }


}

parentelement.html

<link rel="import" href="childelement.html">

<polymer-element name="parent-element">
  <template>    
    <div>      
      <span>Parent Msg: {{msg}}</span>
    </div>
    <child-element msg="{{msg}}"></child-element>    
  </template>
  <script type="application/dart" src="parentelement.dart"></script>
</polymer-element>

childelement.dart:

import 'package:polymer/polymer.dart';

@CustomTag('child-element')
class ChildElement extends PolymerElement {
  @published String msg;

 ChildElement.created() : super.created() {
   print('ChildElement created');
 }

 @override
 void enteredView() {
   super.enteredView();
   print('ChildElement enteredView. Variable value: $msg');     
 }
}

childelement.html

<polymer-element name="child-element">
  <template>    
    <div>      
      <span>Child msg: {{msg}}</span>
    </div>
  </template>
  <script type="application/dart" src="childelement.dart"></script>
</polymer-element>

Answer 1

The created constructor is not suitable if you want rely on the order they are called. As far as I know the polymerCreated callback should be a better fit for you requirement.

I don' really know because enteredView attached fulfilled all my requirements and I therefore never used something else (entereView attached even provides two different slots for own code: 'before super.attached()' and 'after super.attached()')