Polymer: Passing properties to child element doesn't work

I'm trying to output data from a custom Polymer component <data-component> in an <iron-list> but nothing is shown when I open the page. It works when I pass an array of objects directly to the iron-list like <iron-list items='[{"name": "test1"}, {"name":"test2"}]' >

What am I doing wrong here and is the <template is="dom-bind" id="t"> mandatory?

index.html

<html>
  <head>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../data-component.html">
   <link rel="import" href="../../iron-list/iron-list.html">    
    </head>
    
  <body unresolved>
        <template is="dom-bind" id="t">
            <data-component>
                <!--<iron-list items='[{"name": "test1"}, {"name":"test2"}]' > WORKS -->
                <iron-list items="{{data}}" >
                    <template>
                        <div>
                            Name: <span>{{item.name}}</span>
                        </div>
                    </template>
                </iron-list>
        </data-component>
        </template>
  </body>
</html>

data-component.html

<link rel="import" href="../polymer/polymer.html">
<dom-module id="data-component">

  <template>
    <content></content>
  </template>
</dom-module>
<script>
window.coolData = [
  {"name": "Bob"},
  {"name": "Tim"},
  {"name": "Mike"}
];


  Polymer({
    is: 'data-component',
    properties: {
            data: {
                value: window.coolData
            }
        }
    });
</script>

Solution

I'm going to suggest an alternative answer to what I have already posted. If you want your data-component to always contain the iron-list then you can use this version here. However, if the content of the data-component should be more flexible use my other answer.

If you move the iron-list inside the data-component you can remove the dom-bind in your index.html.

data-component.html

<link rel="import" href="../polymer/polymer.html">
<dom-module id="data-component">

    <template>
        <iron-list items="{{data}}" >
            <template>
                <div>
                    Name: <span>{{item.name}}</span>
                </div>
            </template>
        </iron-list>
    </template>
</dom-module>
<script>
window.coolData = [
  {"name": "Bob"},
  {"name": "Tim"},
  {"name": "Mike"}
];


Polymer({
    is: 'data-component',
    properties: {
            data: {
                type: Array,
                value: window.coolData
            }
        }
    });
</script>

index.html

<body unresolved>
    <data-component></data-component>
</body>