[mwc-checklist-item] selected state won't apply if not rendered to dom

[yinonov]

Describe the bug https://user-images.githubusercontent.com/15140652/128464410-680c9665-f272-4a51-afe5-c4fbaf408b7b.mov

toggling the selected state of non-rendered items will not apply the change until rendered back, results in a quick jumpy repainting of the checkbox

To Reproduce Steps to reproduce the behavior:

1. apply display none to mwc-list containing mwc-checklist-items
2. toggle all items' selected state
3. remove display none from mwc-list
4. the list will reveal and show the selected state change

Expected behavior change should occur while not rendered and render back as the actual selected state

Screenshots

https://user-images.githubusercontent.com/15140652/128464410-680c9665-f272-4a51-afe5-c4fbaf408b7b.mov

[allan-chen]

This is a consequence of using animations to reflect state changes. Browsers queue up animations on an element that is hidden until it becomes visible, similar to what can be seen in this watered down example: https://codepen.io/allanchenmdc/pen/xxdBePY

One way to deal with this is to disable the animations when the element is hidden.

[yinonov]

As in https://developer.chrome.com/blog/timer-throttling-in-chrome-88/#animation

[asyncLiz]

Obsolete with M3, checkbox list items are built manually (we'll have prebuilt ones again in the future)