Teleport should provide the option to prepend when there are multiple teleports on the same target
What problem does this feature solve?
A simple use case for this feature would be a reusable notification
component, that is teleported to a notification-panel
component. Ideally, the notification
would live in the component that is responsible for its generation, then be teleported to the notification-panel
which could contain several notifications simultaneously. In this scenario, it makes sense for the latest notification
to be prepended to the top of the notification-panel
, rather than being appended to the bottom.
What does the proposed API look like?
A prepend boolean prop on the teleport
component (which defaults to false) would be an ideal solution from my perspective.
<teleport to="body" :prepend="true"></teleport>
A more complex alternative solution would be something akin to the order prop used in the portal-vue library, where the render order can be dynamically controlled using an numeric order prop on the teleport
component.
<teleport to="body" :order="1"></teleport>
<teleport to="body" :order="-1"></teleport>