title: Data-binding between nested polymer elements
body: <p>Suppose I have two distinct <code>polymer-elements</code>  </p>
  
  <p>One should be embedded inside the other using the <code>content</code> placeholder. 
  Is it possible to do data-binding between these two nested <code>polymer-elements</code> ? </p>
  
  <p>I tried, but I can't get it to work: <a href="http://jsbin.com/IVodePuS/11/" rel="nofollow noreferrer">http://jsbin.com/IVodePuS/11/</a></p>
  
  <p>According to <a href="http://www.polymer-project.org/articles/communication.html#binding" rel="nofollow noreferrer">http://www.polymer-project.org/articles/communication.html#binding</a> data-binding between <code>polymer-elements</code> should work (in those examples they were done inside the <code>template</code> tag without using a <code>content</code> placeholder). </p>
  
  <h1>Update:</h1>
  
  <p>Scott Miles clarified that data-binding only works on the <code>template</code> level.<br>
  However in my case I don't know the exact <code>template</code> beforehand but I want to allow the user of my <code>parent-element</code> to specify which <code>child-element</code> it should contain (provided that there are different <code>child-elements</code>.<br>
  I think this question is related to this one: <a href="https://stackoverflow.com/questions/21522118/using-template-defined-in-light-dom-inside-a-polymer-element/21532931#21532931">Using template defined in light dom inside a Polymer element</a></p>
  
  <p>I updated the example below to highlight his: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;polymer-element name="parent-element" &gt;
    &lt;template &gt;
      &lt;div&gt;Parent data: {{data1}} &lt;/div&gt;
      &lt;content /&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('parent-element', {
        data1 : '',
        ready: function() {
          this.data='parent content';
        }
      });
  
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  
  &lt;polymer-element name="child-element" attributes="data2"&gt;
     &lt;template&gt;
      &lt;div&gt;Parent data: {{data2}} &lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('child-element', {
        data2 : '',
        ready: function() {
        }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  
  &lt;polymer-element name="child2-element" attributes="data2"&gt;
     &lt;template&gt;
      &lt;div&gt;Parent data: {{data2}} &lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('child2-element', {
        data2 : '',
        ready: function() {
        }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>The user can choose which <code>child-element</code> to embed: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;parent-element data1 = "test"&gt;
    &lt;child-element data2="{{data1}}"/&gt;
  &lt;/parent-element&gt;
  
  &lt;parent-element data1 ="test" &gt;
    &lt;child2-element data2="{{data1}}"/&gt;
  &lt;/parent-element&gt;
  </code></pre>
  
  <h1>Workaround:</h1>
  
  <p>The only workaround I found was to add <code>change watcher</code> and use <code>getDistributedNodes()</code> to get the child element and manually set <code>data2</code> to <code>data</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;polymer-element name="parent-element" &gt;
    &lt;template &gt;
      &lt;div&gt;Parent data: {{data}} &lt;/div&gt;
      &lt;content id="content"/&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('parent-element', {
        data : '',
        ready: function() {
          this.data='parent content';
        },
        dataChanged : function() {
            contents = this.$.content.getDistributedNodes();
            if (contents.length &gt; 0) {
                contents[0].data2 = this.data;
            }
        },
      });
  
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>