I am aware of the risks associated with manually manipulating DOM nodes rendered by a Vue component, such as:
- Vue overriding changes after another render
- Potential interference with Vue's patching algorithm
My specific scenario involves wanting to move a DOM node to a separately controlled location in order to display it fullscreen. For example, having an editor widget with a "fullscreen" button that expands and overlays the editor on the screen.
While I know CSS alone can accomplish this using fixed positioning, I am curious about the implications of moving the DOM node outside its current position and appending it directly to the <body> element. Will Vue still be able to properly update the nodes after the parent component is re-rendered?
I have already experimented with this approach and have a functional implementation without any apparent issues so far. However, my concern remains, especially since this concept is not addressed in the Vue documentation.
What potential challenges could arise from this method, if any?
portal-vue is not suitable for me as it recreates the component instance every time it is moved, which is not my desired outcome.