title: Data binding attributes of dynamically created polymer elements
body: <p>If I want to bind the attributes of two polymer elements together then I can use data binding in a template and do the following:</p>
  
  <pre><code>&lt;!-- Publish .items so others can use it for attribute binding. --&gt;
  &lt;polymer-element name="td-model" attributes="items"&gt;
    &lt;script&gt;
      Polymer('td-model', {
        ready: function() {
          this.items = [1, 2, 3];
        }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  
  &lt;polymer-element name="my-app"&gt;
    &lt;template&gt;
      &lt;td-model items="{{list}}"&gt;&lt;/td-model&gt;
      &lt;polymer-localstorage name="myapplist" value="{{list}}"&gt;&lt;/polymer-localstorage&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('my-app', {
        ready: function() {
          // Initialize the instance's "list" property to empty array.
          this.list = this.list || [];
        }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <blockquote>
    <p>From <a href="http://www.polymer-project.org/articles/communication.html#binding" rel="nofollow">http://www.polymer-project.org/articles/communication.html#binding</a></p>
  </blockquote>
  
  <p>However, if I'm creating an element (let's call it) <code>&lt;my-childelement&gt;</code> dynamically using <code>document.createElement()</code> inside of another element <code>&lt;my-parentelement&gt;</code> then how can I synchronise changes made to an attribute of my-childelement with my-parent element?</p>
  
  <p>One option is to emit events from the child element and subscribe to them in the parent, but this is tedious when I have quite a lot of attributes that I want to keep in sync and I then have to manage adding/removing listeners whenever the childelement is replaced with a different child element.</p>
  
  <p><a href="http://www.polymer-project.org/docs/polymer/node_bind.html" rel="nofollow">Node.bind()</a> looks like it might be after but I'm not sure if I'm misunderstanding it's purpose.</p>
  
  <p>I'm hoping to be able to do something along the lines of this:</p>
  
  <pre><code>&lt;polymer-element name="my-parentelement" attributes="shape"&gt;
    &lt;script&gt;
      Polymer('my-parentelement', {
        shape: square,
        ready: function() {
          var child = document.createElement('my-childelement');
          this.bind('shape', new PathObserver(child, 'shape');
  
          // Now this.shape will be kept in sync with child.shape, e.g.
          child.shape = 'triangle';
          this.shape == child.shape; // evaluates to true
        }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>