Using Teleport, in a component, to move internal components to a location within itself - what's the problem?

[silver-steve]

Use Case

I have a use case where a Vue component makes an ajax request, and in the response I'm sending html. Previously I was rendering this with the v-html directive. I wanted to be able to have dynamic Vue components embedded within that html, and get Vue to render everything.

My Solution

So, I created a component, RawHtml.vue. It renders raw html (instead of using the v-html directive) and it also parses out any dynamic Vue components calls <component :is="'some-component'"></component>. It then builds those components separately, and using the Vue Teleport component, I teleport the component back into its original location, within the html.

Teleport requires the teleport location is already be in the DOM. To get around this, I have to use a double rendering technique; I only render the embedded components, if the raw html has been rendered i.e. RawHtml.vue has been mounted.

And, it seems to work great! This has me worried.

Demo

https://stackblitz.com/edit/vitejs-vite-fg23bi?file=src/App.vue

The Problem?

I'm worried because the docs say the following:

The teleport to target must be already in the DOM when the component is mounted. Ideally, this should be an element outside the entire Vue application. If targeting another element rendered by Vue, you need to make sure that element is mounted before the <Teleport>.

Not only am I moving elements inside the Vue application, I'm moving elements inside the calling component. I'm wondering if this is going to come back to bite me. Why should Teleport ideally be mounted outside the Vue application?

Why I'm Doing This

I'm running SSR, PHP/Laravel and using Blade. Vue is only used for components. I don't use Vue Router or anything like that.

The reason I'm doing all this is because I have PHP building all the data for my Vue components, I send it onload and via ajax. My Vue components reads that data and renders everything out. Using blade partials means I can easily move the PHP defined components wherever I want.

My code relies on having the PHP driven components registered globally.