[](https://www.npmjs.com/package/@polymer/iron-list) [](https://travis-ci.org/PolymerElements/iron-list) [](https://webcomponents.org/element/@polymer/iron-list) ## <iron-list> `iron-list` displays a virtual, 'infinite' list. The template inside the iron-list element represents the DOM to create for each list item. The `items` property specifies an array of list item data. For performance reasons, not every item in the list is rendered at once; instead a small subset of actual template elements *(enough to fill the viewport)* are rendered and reused as the user scrolls. As such, it is important that all state of the list template be bound to the model driving it, since the view may be reused with a new model at any time. Particularly, any state that may change as the result of a user interaction with the list item must be bound to the model to avoid view state inconsistency. ### Sizing iron-list `iron-list` must either be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS `height` property set via a class or inline style, or else is sized by other layout means (e.g. the `flex` or `fit` classes). #### Flexbox - [jsbin](https://jsbin.com/vejoni/edit?html,output) ```html App name ``` #### Explicit size - [jsbin](https://jsbin.com/vopucus/edit?html,output) ```html ``` #### Main document scrolling - [jsbin](https://jsbin.com/wevirow/edit?html,output) ```html ``` `iron-list` must be given a `