Teleport Target Removal: State Persistence Across Conditional Rendering

Goal

Investigate how Vue 3’s Teleport behaves when its target element is conditionally rendered or removed from the DOM. The focus is on whether the teleported component’s internal state is preserved or recreated when the target reappears.

Constraints & Uncertainty

Vue 3’s documentation specifies that the teleported content is removed when the target disappears and reattached when it reappears. However, the spec does not clarify behavior when the target resides within a v-if block or inside a Shadow DOM host. Browser differences may also affect state persistence.

Specific Questions

• When the target element is toggled via v-if, does the teleported component maintain its internal reactive state across the removal‑readdition cycle?
• If the target resides inside a Shadow DOM host, does Teleport reattach the content correctly, and is any state lost?
• Is there a recommended pattern or API to explicitly preserve or reset state when the target element is conditionally rendered?