Description
Imagine I have the following component, <TopLevelThing>.
<div class="top-level-thing">
<p>Top level stuff.</p>
</div>It's intended to be used at the top-level of the <body>.
However, I might want to use it as part of a component which is deep inside the <body>, nowhere near the top-level.
This could be achieved with a special tag like the following.
<:Body>
<TopLevelThing />
</:Body>Svelte could inject this into the top-level of the <body> alongside other elements.
The advantage is that it would retain all the functionality of a component: the lifecycle, properties, and being part of the component organisation and structure.
One common use case for this could be modals. They can often relate very specifically to the organisation and structure of a chain of components. However, perhaps because of styling or some other reason it may be more logical for the modal structure to be located at the top-level of the <body>, rather than within the parent component structure.
It's quite possible that an alternative approach, using current Svelte features, is most appropriate to these kinds of use cases. However, this approach came to my mind, and I thought it was worth airing.
As an aside, this feature does raise some additional questions. For instance, if a <:Body> tag sounds good, would it make more sense to have a more generic <:Injection> tag instead, which could be used with more than just the <Body>? Also, might developers find it useful in some cases, of their choosing, for <:Injection> tags to persist even when their parent components are destroyed?