title: When is it safe (if at all) to manually relocate a Vue-rendered DOM node?
body: <p>I understand that you should not manually manipulate the DOM nodes rendered by a Vue component for reasons including:</p>
  <ul>
  <li>After another render, Vue can override any changes you did</li>
  <li>It can interfere with Vue's patching algorithm</li>
  </ul>
  <p>My use case is I would like to implement a way to move a DOM node to a separately-controlled location for the purpose of displaying it fullscreen. Imagine an editor widget with a fullscreen button that &quot;pops out&quot; the editor and overlays it fullscreen.</p>
  <p>I understand that I can achieve this with CSS alone using fixed positioning, but I'm not interested in that, I'm particularly interested in the consequences of moving the DOM node out from wherever it is and appending it directly to the <code>&lt;body&gt;</code> element. Will Vue still be able to patch the nodes correctly after the parent component re-renders?</p>
  <p>I have experimented with this already and I have a working implementation, and I haven't encountered any issues yet. Still, this doesn't ease my concern, and the Vue docs don't talk about doing something like this.</p>
  <p>What potential issues, if any, might I encounter?</p>
  <p><a href="https://github.com/LinusBorg/portal-vue" rel="nofollow noreferrer">portal-vue</a> is unsuitable because it recreates the component instance each time it is relocated, which I do not want.</p>