seed.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-list/iron-list.html">
<!--<link rel="import" href="child-element.html">-->

<dom-module id="seed-element">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }
      iron-list {
        height: 100px;
        width: 100px;
      }

      /*Commenting this out fixes the issue*/
      .child {
        display: block;
      }
    </style>
    <i>Note: enter a search and clear it to kick iron-list/data-binding into working.</i>
    <div>
      <input value="{{search::input}}" type="search" placeholder="search for world">
    </div>

    <iron-list items="[[filter(records, search)]]">
      <template>
        <div class="child">
          <span>[[item]]</span>
        </div>
      </template>
    </iron-list>

  </template>

  <script>
    Polymer({
      is: 'seed-element',
      properties: {
        records: {
          type: Array,
          value: function(){
            return [
              "hello",
              "world"
            ]
          }
        },
        search: ""
      },
      ready: function() {

      },
      filter: function(records, search){
        search = search.trim();
        var matching = [];
        this.records.forEach(function(record){
          if(search == "" || record.indexOf(search) > -1){
            matching.push(record);
          }
        }.bind(this));
        return matching;
      }
    });
  </script>
</dom-module>