title: Polymer's handling of undefined (sub)properties
body: <p>Recently we had an issue in our Polymer application which we could fix by setting a value to <code>null</code> instead of <code>undefined</code>. So our tool works fine again.</p>
  
  <p>But I would like to take this issue as a chance to have a look under Polymer's hood. Unfortunately, it's not easy to explain. So I have set up a <a href="https://jsfiddle.net/4717p1sq/4/" rel="nofollow noreferrer">small example at JSFiddle</a> and would like you to play with it according to the following steps and answer my big "Why?" question about it. Would be great!</p>
  
  <h2>Intro</h2>
  
  <p>The example is about setting a path to <code>undefined</code> so I wired two custom elements <code>x-producer</code> and <code>x-consumer</code>. The buttons allow you to set the value of <code>x-producer</code> which is bound to a <code>h1</code> in <code>x-consumer</code>.</p>
  
  <h2>Happy path:</h2>
  
  <ol>
  <li>Click 'Set Foo: A' button. <em>Producer property change is reflected in "foo.bar in consumer" heading.</em></li>
  <li>Click 'Set Bar: 1' button. <em>Sub-property of producer's property changes, this is also reflected in "foo.bar in consumer" heading.</em></li>
  <li>Click 'Set Bar: undefined' button. <em>Sub-property of producer's property is set to <code>undefined</code>, this is also reflected in "foo.bar in consumer" heading.</em></li>
  <li>Repeat steps 2 and 3 as often you want to. <em>Every change of producer's sub-property is reflected in consumer's heading.</em></li>
  </ol>
  
  <h2>Un-happy path:</h2>
  
  <ol>
  <li>Click 'Set Foo: A' button. <em>Same as in happy path.</em></li>
  <li>Click 'Set Bar: 1' button. <em>Same as in happy path.</em></li>
  <li>Click 'Set Foo: B' button. <em>Producer's property (and thus sub-property) changes, which is reflected in "foo.bar in consumer" heading.</em></li>
  <li>Click 'Set Foo: A' button. <em>Producer's property (and thus sub-property) changes to the first property. In "foo.bar in consumer" heading you see the corresponding value again.</em></li>
  <li>Click 'Set Bar: undefined' button. <em>Sub-property of producer's property is set to <code>undefined</code>. This is also reflected in the <code>p</code> element of the producer, <strong>but not in "foo.bar in consumer" heading</strong>.</em></li>
  </ol>
  
  <h2>Make un-happy path happy again</h2>
  
  <p>Just set the sub-property to <code>null</code> instead of <code>undefined</code> in listener <code>_onButtonBarUndefined</code>.</p>
  
  <h2>Some thoughts</h2>
  
  <p>In both cases the same code is executed which sets a sub-property to <code>undefined</code>. But in the first case, the property stays the same object, while the property is switched in the second case. I don't know if it matters to set a <em>sub</em>-property to <code>undefined</code>, but I think so.</p>
  
  <p>Once again, it would be great if someone could explain me the inner mechanics of Polymer which lead to this behavior. THank you very much. </p>