dom-repeat keeps running asynchronous code after detached if chunking is enabled.

[rubenlg]

Description

When dom-repeat is used with chunked rendering, it schedules a requestAnimationFrame which is not cancelled when the element is disconnected from the DOM. As a result, even after the component is detached from the DOM, it keeps running code.

Live Demo

https://jsbin.com/sirelojane/1/edit?html,console,output

Steps to Reproduce

Run the script, look at the console.

Expected Results

No RAF should have been printed after the component is detached

Actual Results

There is at least a couple more.

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

I only tested on Chrome, but looking at the implementation of dom-repeat it should affect all of them.

Versions

• Polymer: 2.8.0 and 3.4.1
• webcomponents: v1

Potential fix

Adding cancelAnimationFrame(this.__chunkingId); to disconnectedCallback in dom-repeat.js seems to resolve the issue, but I don't know what other consequences that could have.