How to use Polymer lifecycle hooks

Question

I have a component that contains video. My component is nested in a dom-if and can disappear. When this happens the video (and it sound) keep playing.

Is there a way in which my component can detect that is has disappeared from the DOM? I have tried to use the 'detached' callback as described here: https://www.polymer-project.org/1.0/docs/devguide/registering-elements

Polymer({
  is: 'my-component-with-video',

  properties: {
     // some properties
  },

  detached: function() {
    console.log('Component detached');
    // more code to stop video
  },

but when my element is removed by the dom-if nothing happens, I don't see the console.log message. What am I doing wrong?

Answer 1

There are two scenarios possible here:

1. You want your element to be discarded and recreated fresh when the condition changes.

2. You want to keep it in the dom but freeze it.

In the first case you need to add the restamp attribute to the dom-if to make sure the template DOM is destroyed, not hidden. By default the dom-if stamps the template at first initialization and then hides it from the view if the condition becomes falsy.

In the second case, the suggestion given by Intervalia will not work, because the dom-if in "hide" mode does not detach anything from the DOM. Setting restamp attribute will make the detached callback run but then no point in pausing anything since the element will be discarded. If you want to keep it in the DOM and freeze it's state you need to listen to dom-change event on the dom-if and run the .pause() accordingly.