iron-list is not reusable, after binding smaller array it still shows old array items at the end

[alfalabs]

iron-list can not be reused, items from previous array are mixed with newly bound array

Expected outcome

• old items should be purged
• reset or clear method should be provided

Actual outcome

when new array is smaller that previous, items from previous array are displayed at the end of the list, not all, but I believe what is left over from scrolling buffer

Steps to reproduce

• iron-list window height: 20 rows

step 1

• bind array of 200 items
• iron-list displays all items as expected, infinite scrolling works.

step 2

• bind different array of 10 items
• iron-list in 20 row window, will display first 10 items from new array and after that some rows from step 1 array will be displayed

other than that, iron-list is great!

[dmarquezbh]

It turns out in my project that the style below is the culprit (copied from selection.html demo):

    .item {
      @apply --layout-horizontal;
    }

I've removed this part and it worked back again. Don't know why it worked, but this tip might help a lot of folks in the same situation as I was.

"other than that, iron-list is great!", totally agree!

[rwestlund]

I ran in to this exact behavior as well. The culprit for me was having this style in the child elements in my list:

:host {
    display: block;
}

It looks like you can't set display from inside the child. This is such a common pattern that I think this should be noted in the docs.