Teleport component là gì? Use case?

<Teleport> render content vào một DOM node nằm ngoài component tree — nhưng vẫn là con về mặt logic (data flow, events hoạt động bình thường):

<Teleport to="body">
  <div class="modal-overlay" v-if="showModal">
    <div class="modal">...</div>
  </div>
</Teleport>

Use cases:

1. Modals, drawers, tooltips — tránh z-index/overflow issues
2. Notifications/toasts — render ở root level
3. Bất kỳ UI cần break khỏi parent overflow/stacking context

Lưu ý: Teleport content vẫn share reactive state với parent component — props, emits, provide/inject hoạt động bình thường.

<Teleport> renders content into a DOM node outside the component tree — while remaining a logical child (data flow, events work normally):

<Teleport to="body">
  <div class="modal-overlay" v-if="showModal">
    <div class="modal">...</div>
  </div>
</Teleport>

Use cases:

1. Modals, drawers, tooltips — avoids z-index/overflow issues
2. Notifications/toasts — rendered at root level
3. Any UI needing to break out of parent overflow/stacking context

Pitfall: Teleport content still shares reactive state with the parent component — props, emits, provide/inject work normally.