title: How to force browser to clean up dom element never added to DOM?
body: <p>In a React application, I am creating a custom component, this component generates <code>&lt;video&gt;</code> elements used by three.js's <a href="https://threejs.org/docs/#api/en/textures/VideoTexture" rel="nofollow noreferrer"><code>VideoTexture</code></a>s.</p>
  <p>Everything works, except that after unmounting the component, even when the three.js webgl context is being destroyed, the video elements that were playing continue to keep playing.</p>
  <p>I'm struggling even to find a way in the devtools to monitor the state of these &quot;ghost&quot; <code>&lt;video&gt;</code> elements, mainly because they are not ever even added to the DOM.</p>
  <p>So far the best idea I have is to do something extremely silly like add these to the DOM right before unmounting the component (and subsequently they would be removed due to unmounting the component). I just wish there was a better way.</p>