Polymer: dom-repeat - styles updated during runtime are not resetted if items are changed/deleted

[derhuebiii]

Description

Live Demo

https://jsfiddle.net/hcdvqa9d/2/
=> Click "Delete Second". Name stays red for other names, even though it is only set for the item "Bob"

Steps to Reproduce

Create an element inside a dom-repeat that changes CSS via updateStyles.
When one element is deleted, the one taking its position (e.g. delete #5, #6 becoming #5) will have the CSS style from the deleted object.

Expected Results

Styles are resetted as it is not the same item anymore.

Actual Results

Styles stay the same like they were for the deleted item. Is this really desired behaviour?

Browsers Affected

• [x] Chrome
• [x] Firefox
• [?] Edge
• [?] Safari 9
• [?] Safari 8
• [x] IE 11

Versions

• Polymer: v1-2
• webcomponents: v2

[MajorBreakfast]

What you're seeing is actually the desired behavior. Here's how <dom-repeat> works.

Whenever you mutate the array, <dom-repeat> rerenders and does a "full refresh"

https://github.com/Polymer/polymer/blob/589684a5a45ed8907dd6d46479a015fd66fec845/lib/elements/dom-repeat.html#L518

In this "full refresh", it, to achieve better performance, reuses the template instances that already exist and feeds them new data. In your case this causes each MyInnerElement#data property to be set to a new value. Just react to the property change by setting up an observer and it works: https://jsfiddle.net/hcdvqa9d/3/

[MajorBreakfast]

BTW You don't need to use this.updateStyles({ color }) to set the color, you can set it via this.style.color directly. updateStyles() is only needed for setting CSS custom properties.

[TimvdLippe]

@MajorBreakfast is absolutely correct. For performance reasons, we reuse the elements. You need to react on Data changes to update the styling, per the updated JSFiddle.

For restamping of dom-repeat elements, #1713 is filed which has a PR open at #4957. Therefore I am closing this issue as fixed/pending duplicate for the restamp property on dom-repeat.