Adding method childrenChanged crashes Firefox/Safari

[keithamus]

Abstract

Having a simple element with a method named childrenChanged in its prototype, when in Firefox or Safai (curiously not Chrome), calls the childrenChanged method hundreds of times per second, resulting in slow/unresponsive scripts and frozen pages.

Test Case

I've put a simple reduced test case up here: http://jsbin.com/cuvap/2 - to which the contents are:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.0/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.0/polymer.js"></script>

<polymer-element name="foo-bar">
  <script>
    Polymer('foo-bar', {
      childrenChanged: function () {
         console.log('childrenChanged');
      }
    });
  </script>
</polymer-element>

<foo-bar></foo-bar>

Loading this page in Chrome seems fine, but loading it in Safari or Firefox and checking the log, one can see childrenChanged seems to be recursively called:

[sjmiles]

Polymer examines your prototype for methods of the form <name>Changed and automatically creates a binding that calls <name>Changed every time property <name> changes.

The children property is a native accessor, and apparently appears to Polymer to be changing continually. We'll have to investigate exactly why this is true, but it's not going to work properly in any case (native accessors are not generally observable).

If you are purposefully trying to watch for changes to children, you should use a MutationObserver instead. Otherwise, you should use a different name for your method.

We have an outstanding issue to resolve one facet of this problem here: #123.

[sorvell]

This can be very confusing and our plan is to throw a warning and document this better.

Closed in favor of #123.