Cannot bind to custom element's attribute placed inside a template

I've been trying out Polymer recently and have written the following sample. The problem is that if I try to put a custom element inside a template, the binding does not work as intended.

I want to move the sliders inside color-pallet and change the color of the name, but the change does not have any effect to the color. If I place the sliders directly inside the template, it works as intended.

Am I missing something or does Polymer not yet support this kind of binding? I'm using Polymer commit d14278cfceb87f68b2d0241ec704c6a646f246bf with Chrome 27.0.1453.93.

index.html

<html>
    <head>
        <script src="polymer/polymer.js" ></script>
        <link rel="import" href="color-pallet.html">
    </head>
    <body>
    <template id="inputArea" repeat="{{animals}}">
        <div>
            <p>
                <strong><span style="color: rgb({{color.red}},{{color.green}},{{color.blue}})">{{name}}</span></strong>
            </p> 
            <input type="text" value="{{name}}" placeholder="Your name here">
            <!-- The following works -->
            <ul>
                <li>r<input type="range" min="0" max="255" value="{{color.red}}"><input readonly type="text" value="{{color.red}}"></li>
                <li>g<input type="range" min="0" max="255" value="{{color.green}}"><input readonly type="text" value="{{color.green}}"></li>
                <li>b<input type="range" min="0" max="255" value="{{color.blue}}"><input readonly type="text" value="{{color.blue}}"></li>      
            </ul>
            <!-- The following doesn't work -->
            <!-- <color-pallet red="{{color.red}}" green="{{color.green}}" blue="{{color.blue}}"></color-pallet> -->
        </div>
    </template>
    <script>
    var t = document.getElementById('inputArea');
    var model = {
        animals: [
        {
            name: "Giraffe",
            color: {
                red: 255,
                green: 255,
                blue: 0
            }
        },
        {
            name: "Aardvark",
            color: {
                red: 255,
                green: 0,
                blue: 0
            }               
        }]
    };
    t.model = model;
    </script>
    </body>
</html>

color-pallet.html

<element name="color-pallet" attributes="red green blue">
    <template>
        <ul>
            <li><input type="range" min="0" max="255" value="{{red}}"><input readonly type="text" value="{{red}}"></li>
            <li><input type="range" min="0" max="255" value="{{green}}"><input readonly type="text" value="{{green}}"></li>
            <li><input type="range" min="0" max="255" value="{{blue}}"><input readonly type="text" value="{{blue}}"></li>           
        </ul>
    </template>
    <script>
        Polymer.register(this, {
            red: 0,
            green: 0,
            blue: 0
        });
    </script>
</element>

Solution

The problem here is that Polymer does not know how to set up two way changes between #inputArea's model and instances of <color-pallet>. The .model property is a semi-recent addition to the <template> in MDV.

EDIT: This is actually caused by the<color-pallet> element definition not being available before MDV tries to bind to it in the template. This is a limitation of the Custom Elements polyfill, and we may try to mitigate the effects before the native implementations are ready.

If you wrap the model assignment inside a handler for the "WebComponentsReady" event, this will work as expected.

document.addEventListener('WebComponentsReady', function() {
  t.model = model;
});