Binding undefined does not work as expected

[arodic]

When binding property of a parent to property of a child, parent's property value is used.

However, if parent's property does not have default value, or default value is explicitly set to undefined, child's property value is used instead.

Personally, I find this unintuitive and it breaks applications that deal with undefined values. For example, a value that is supposed to be undefined can suddenly become null, false, empty string or whatever is the default value of the element you bind it to.

This also applies to sibling elements. It appears that priority of values in binding corresponds to the order of elements in DOM, except if the value is undefined.

Below is a code that illustrated the problem:

<dom-module id="child-el">
  <template>{{value}}</template>
</dom-module>
<script>
  Polymer({
    is: 'child-el',
    properties: {
      value: {
        value: false,
        notify: true,
        observer: '_valueChanged'
      }
    },
    _valueChanged: function() {
      console.log('child-el value changed:', this.value);
    }
  });
</script>

<dom-module id="parent-el">
  <template><child-el value="{{value}}"></child-el></template>
</dom-module>
<script>
  Polymer({
    is: 'parent-el',
    properties: {
      value: {
        value: undefined,
        notify: true,
        observer: '_valueChanged'
      }
    },
    _valueChanged: function() {
      console.log('parent-el value changed:', this.value);
    }
  });
</script>

If you add parent-el to the DOM you will notice that its value is set to false while it should be undefined.

[punzki]

Firstly, your property must have an explicit type, in this case you want it to be a Boolean. I don't really know how Polymer interprets the property's type since you didn't give an explicit one.

If it were a Boolean property, its value is is set based on the existence of the corresponding HTML attribute (value, in this case). https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-deserialization :

Boolean properties set based on the existence of the attribute: if the attribute exists at all, its value is true, regardless of its string-value (and the value is only false if the attribute does not exist).

...so the absence of the value HTML attribute means the value of value property is false.

[kevinpschaaf]

Polymer uses undefined to mean exactly that -- a sentinel indicating when the value does not yet have a user-defined value, and gives special affordances to undefined under that assumption. So its best to avoid defining user-facing an API where changes to undefined should do something useful, and instead use null for those cases (which is treated as defined).