Polymer - Detached event is not triggered when the page changes - polymer

Question

I am exploring Polymer with the Shop Application (https://github.com/Polymer/shop)
In the Shop-App.html following iron-pages are defined.
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
<!-- home view -->
<shop-home name="home" categories="[[categories]]"></shop-home>
<!-- list view of items in a category -->
<shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>
<!-- detail view of one item -->
<shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
<!-- cart view -->
<shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>
<!-- checkout view -->
<shop-checkout name="checkout" cart="[[cart]]" total="[[total]]" route="{{subroute}}"></shop-checkout>
<shop-404-warning name="404"></shop-404-warning>
</iron-pages>
In the "shop-list" element, I have added
attached: function() {
console.log("I am attached..");
},
detached: function() {
console.log("I am detached..");
}
When I run the application, and visit the Shop-List view, in the console, "I am attached" is shown. When i go to other pages, shop-list's detach event is not triggered.
And whatever data that is stored in the Shop-List view will persist if I go back to the screen.
How to avoid this?
Can we have a new instance created each time the page is visited and clean up the logic on page change??

Answer 1

Everything you will propably need is property page. Whenever this property change, you have to observe it and make changes. So something like this:
page: {
type: String,
value: "foo",
observer: "_observePage"
},
and then define a function called _observePage
_observerPage: function(newValue, oldValue) {
// handle logic like reset data and so on
}
function _observerPage is called everytime when page property changes. There are also 2 variables passed to the function, represents new value and old value of page
link to documentation: https://www.polymer-project.org/1.0/docs/devguide/observers
There are another solutions. Like using page.js which can be seen in many Polymer tutorial videos. This library simplify your project routing very much. You can define functions for page enter and page exit.
And about new instance every time you visit site:
Solution would be delete and re-create that element. For example
var list = document.querySelector("shop-list");
document.body.removeChild(list);
var newList = doucment.createElement("shop-list");
document.body.appendChild(newList);