title: How to use Polymer lifecycle hooks
body: <p>I have a component that contains video. My component is nested in a <code>dom-if</code> and can disappear. When this happens the video (and it sound) keep playing.</p>
  
  <p>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: <a href="https://www.polymer-project.org/1.0/docs/devguide/registering-elements" rel="nofollow noreferrer">https://www.polymer-project.org/1.0/docs/devguide/registering-elements</a></p>
  
  <pre><code>Polymer({
    is: 'my-component-with-video',
  
    properties: {
       // some properties
    },
  
    detached: function() {
      console.log('Component detached');
      // more code to stop video
    },
  </code></pre>
  
  <p>but when my element is removed by the <code>dom-if</code> nothing happens, I don't see the <code>console.log</code> message. What am I doing wrong?</p>