Polymer data binding across elements not working in Chrome dev / canary

Question

I've been happily developing an app in Polymer. All is going well, but some fairly basic stuff isn't working in Chrome Dev and Chrome Canary, is this expected?

Here's a reduction of what I'm seeing [codepen to try it out yourself]:

<script src="http://www.polymer-project.org/platform.js"></script></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<my-app></my-app>

<polymer-element name='my-app'>
  <template>
    <my-processor input='{{input}}' output='{{output}}'>
    <input value='{{input}}'> <br>
    Input: {{input}} <br>
    Processed: {{output}} 
  </template>
  <script>
    Polymer('my-app', { 'input': 'hello world', });
  </script>
</polymer-element>

<polymer-element name='my-processor' attributes='input output'>
  <script>
    Polymer('my-processor', {
      inputChanged: function() {
        this.output = this.input + ' (processed)';
      }
    });
  </script>
</polymer-element>

In Chrome Dev and Canary the processed output is never displayed. I've used the debugger to see that inputChanged does fire on the my-processor element, but my-app never gets the updated output value.

In Chrome 34, Safari and Firefox everything works as expected and the processed output is displayed as expected.

Answer 1

As per the warning in the console, it's important that the the my-processor definitions comes prior to my-app that uses it. my-processor needs to be registered first for the bindings to be picked up properly.

http://jsbin.com/xovegoga/3/edit