How does <Teleport to="body"> render modal dialogs outside the component container?
❓ Interview Prompt: Explain the <Teleport> built-in component, rendering DOM nodes outside parent markup, and escaping CSS z-index/overflow stacking contexts.
Modal dialogs, tooltips, and notification toasts often suffer from CSS layout bugs ('overflow: hidden' clipping or 'z-index' stacking context issues) when rendered inside nested container divs.
'<Teleport to="...">':
The built-in '<Teleport to="body">' component allows rendering a component's DOM elements at a completely different location in the DOM tree (such as 'document.body'), while still preserving logical component communication (props, events, reactivity) inside the Vue parent component!
Code Implementation Example
<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
</script>
<template>
<button @click="isOpen = true">Open Modal</button>
<!-- Teleports modal HTML output directly to document.body! -->
<Teleport to="body">
<div v-if="isOpen" class="modal-overlay">
<div class="modal-content">
<h3>Escaped CSS Stacking Context!</h3>
<button @click="isOpen = false">Close</button>
</div>
</div>
</Teleport>
</template><Teleport to="body"> renders DOM nodes at a target selector outside parent markup while retaining component reactivity.