[0.8] Properties observers registered too early #1258

cedric-marcone · 2015-03-05T08:50:43Z

Properties observers seem to be set up too early.
If I declare a default value for a property, the property change callback is invoked before the component is ready.

<script>
Polymer({

  is: 'x-component',

  properties: {
    opened: {
      type: Boolean,
      observer: 'openedChanged'
    }
  },

  configure: function() {
    return { opened: false }
  },

  openedChanged: function (newVal, oldVal) {
    console.log('openedChanged', newVal, oldVal);
  },

  ready: function() {
    console.log('ready');
  }
});
</script>

This leads to the following output in the console :

openedChanged false undefined
ready

Do we really want to observe the transition from undefined to default value ?

PS: I updated the code to reflect today's changes in ca0953c but it behaved the same prior to @kevinpschaaf commits.

The text was updated successfully, but these errors were encountered:

robbear · 2015-04-16T18:33:33Z

I am seeing the same thing, but not in a native browser like Chrome. So it appears the lifecycle path differs between Shadow DOM and Shady DOM. This simple test demonstrates the order of operation, run under a particular browser type:

lifecycle-tester.html:

<link rel="import" href="polymer/polymer.html">
<dom-module id="lifecycle-tester">
  <template>
    <content></content>
  </template>
</dom-module>
<script>
var LifecycleTester = Polymer({
  is: 'lifecycle-tester',

  created: function() {
    console.log('lifecycle-tester: created');
  },

  attached: function() {
    console.log('lifecycle-tester: attached');
  },

  detached: function() {
    console.log('lifecycle-tester: detached');
  },

  ready: function() {
    console.log('lifecycle-tester: ready');
  },

  attributeChanged: function() {
    console.log('lifecycle-tester: attributeChanged');
  },

  properties: {
    fooAttribute: {
      type: Number,
      reflectToAttribute: true,
      value: 1
    }
  }
});
</script>

index.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="lifecycle-tester.html">
</head>

<body onload='onLoad()'>
  <div id="container"></div>
  <script>
    function onLoad() {
      var container = document.getElementById('container');
      var fixture = document.createElement('lifecycle-tester');
      container.appendChild(fixture);          
    }
  </script>
</body>
</html>

Under Chrome:

lifecycle-tester: created
lifecycle-tester: ready
lifecycle-tester: attributeChanged
lifecycle-tester: attached

Under Firefox:

lifecycle-tester: created
lifecycle-tester: attributeChanged
lifecycle-tester: ready
lifecycle-tester: attached

arthurevans · 2015-04-16T20:04:17Z

@robbear What you're talking about (lifecycle callbacks) is unrelated to whether property observers fire when the default value is set.

Some ordering is different on native webcomponents vs. polyfilled webcomponents. However, we make some ordering guarantees that you can rely on (created => ready => attached are always fired in that order).

sorvell · 2015-05-22T05:00:45Z

The design notion here is that the element starts in a pristine state and you are informed of all changes that point on, including default values. Input values are also, by design, set before the ready method is called. By ready time the element's local dom has been created and the element itself has been configured with values.

We've also now normalized attached timing such that it is never called before ready.

sorvell closed this as completed May 22, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[0.8] Properties observers registered too early #1258

[0.8] Properties observers registered too early #1258

cedric-marcone commented Mar 5, 2015

robbear commented Apr 16, 2015

arthurevans commented Apr 16, 2015

sorvell commented May 22, 2015

[0.8] Properties observers registered too early #1258

[0.8] Properties observers registered too early #1258

Comments

cedric-marcone commented Mar 5, 2015

robbear commented Apr 16, 2015

arthurevans commented Apr 16, 2015

sorvell commented May 22, 2015