Polymer 1.0: reference selected iron-list item in CSS

Question

I'm trying to highlight the selected item from an iron-list. However, I can't seem to find any property to track in CSS to apply a highlight to the selected item specifically. My template code looks like this:

<iron-list items="[[fileCells]]" as="item" selection-enabled>
  <template>
    <paper-icon-item on-tap="_onItemTap">
      <iron-icon icon="[[item.iconName]]" item-icon></iron-icon>
      <paper-item-body two-line>
        <div>[[item.fileName]]</div>
        <div secondary>[[item.progressValue]]</div>
      </paper-item-body>
    </paper-icon-item>
  </template>
</iron-list>
<array-selector id="selector" items="{{fileCells}}" selected="{{selected}}" toggle></array-selector>

The cells are displaying correctly, and I can capture taps on the items. Before I started implementing the iron-list, I had some static paper-icon-item elements inside an iron-selector element. I could easily style the selected element like so:

paper-icon-item.iron-selected {
  background: #B2EBF2;
}

But this no longer works in the dynamic iron-list implementation, since the class property of paper-icon-item doesn't seem to be updating upon being selected. Is there another property I can track to style only the selected item? Would re-implementing iron-selector somewhere help me?

Maria Maria · Accepted Answer · 2015-09-28T19:15:22

There is a selected property, but it is not reflected to a class. You could do that manually by listening to changes to the selected property and updating the class in a computed binding.

<paper-icon-item class$="[[_computeClass(selected)]]">

In the prototype implement the function, for example like this.

_computeClass : function(selected) {
     return selected? "selected": "";
}

Then you can use the selectedclass in your CSS.

Polymer 1.0: reference selected iron-list item in CSS

1 Answers