How to properly remove a polymer element from a web page

0
votes

I'm having some issues with the removal of a polymer element from my web page.

I've build a carousel via an unordered list which list items contain content. Some of this content is simple HTML, some are images, some are videos and some are polymer elements.

Every now and then, the <ul> gets cleared via a jQuery .empty() command.

The issue I'm facing is that the polymer elements don't appear to be cleared correctly.

Inside the polymer elements are timeout events that retrieve content(xml and images) every now and then. When investigating the network load in the chrome developer tools AFTER the polymer element has been removed from the page, you can still see the xml and images being loaded every now and then. So aparantly, a part of the polymer element is still active, most likely somewhere in the shadow-dom.

How do I properly remove an embedded polymer element and everything associated with it from my webpage?

1
javascriptjquerypolymershadow-dom
Can you update the question to show the code that adds/removes the timers? If you're using Polymer lifecycle callbacks, it's important to show that. Even better would be a reproducible code snippet in a fiddle (codepen, etc.). – tony19

1 Answers

2
votes

I think setTimeout is not defined within the scope of your element but in global scope.

So you must use clearTimeout function in lifecycle detach function in your element to cancel existing timeouts.