polymer: dom-if memory leak

Description

dom-if with restamp causes memory to be leaked until the window is refreshed. This does not work well with SPAs.

Expected outcome

Memory to be cleaned up when the garbage collector runs after a page has been left.

Actual outcome

Memory is leaked until the page is refreshed

Steps to reproduce

Use the polymer-2 starter kit. Modify my-app.html by replacing the normal view code in iron-pages with

<template is="dom-if" if="[[isView1]]" restamp>
    <my-view1 name="view1"></my-view1>
</template>
<template is="dom-if" if="[[isView2]]" restamp>
    <my-view2 name="view2"></my-view2>
</template>
<template is="dom-if" if="[[isView3]]" restamp>
    <my-view3 name="view3"></my-view3>
</template>

Inside of _routePageChanged(page): add this code after this.page = page || 'view';

if (page === 'view1') {
    this.isView1 = true;
    this.isView2 = false;
    this.isView3 = false;
} else if (page === 'view2') {
    this.isView1 = false;
    this.isView2 = true;
    this.isView3 = false;
} else if (page === 'view3') {
    this.isView1 = false;
    this.isView2 = false;
    this.isView3 = true;
}

Adding this code to my-view2.html makes it easy to see the memory leak.

connectedCallback() {
    super.connectedCallback();
    this.hugeArray = [];
    for (var i = 0; i < 1000 * 100; i++) {
        this.hugeArray.push(Math.ceil(Math.random() * 100))
    }
}

This was taken after switching between the views and forcing a garbage collect after landing back on view1.

Browsers Affected

• Chrome
• Edge
• Firefox
• IE 11
• Safari 8
• Safari 9

Versions

• Polymer: v2.6, v3.0.2
• webcomponents: v1.2