Data-binding between nested polymer elements

Question

Suppose I have two distinct polymer-elements

One should be embedded inside the other using the content placeholder. Is it possible to do

Answer 1

Polymer data-binding works by attaching a model to a whole subtree.

You wrote:

<parent-element>
  <child-element data2="{{data}}"/>
</parent-element>

this implies a rule that the parentNode provides the binding model. But now imagine you wanted to write:

<parent-element>
  <div>
    <child-element data2="{{data}}"></child-element>
  </div>
</parent-element>

Now you have a problem.

Instead, in Polymer examples, you will notice that the {{}} are (almost always) inside of a template. For example, if I define:

<polymer-element name="host-element" attributes="data" noscript>
<template>
  <parent-element data1="{{data}}">
    <child-element data2="{{data}}"></child-element>
  </parent-element>
</template>
</polymer-element>

Now, I have a model context (host-element) that I can use to bind things together in the entire subtree described by the template.

Note that I don't need attributes="data" for this to work. I added that so host-element exposes data and I can do this:

<host-element data="test"></host-element>  

http://jsbin.com/IVodePuS/15/edit

Answer 2

Works like a charm. Parent element is publishing property data, that can by 2 way data bound. This way the child element gets the same data.

<polymer-element name="custom-element">
<template>
    <parent data="{{data}}">
        <child data="{{data}}"></child>
    </parent>
</template>
<script>
    Polymer({
        ready: function() {

        },
        data: {}
    });
</script>

Answer 3

I think in Polymer >= 1.0 this should be done using "Auto-binding template".