What is Teleport in Vue 3 and how is it used?

Teleport in Vue 3 is a special component that allows rendering child elements in a different place in the DOM, separate from the component's location in the Vue hierarchy.

This is useful, for example, for modal windows, tooltips, or pop-up menus that logically belong to one component but should be visually displayed elsewhere, such as at the root of the document.

Example of usage:

<template>
  <teleport to="body">
    <div class="modal">
      This is a modal window rendered in the body
    </div>
  </teleport>
</template>

Here, the content inside <teleport> will be inserted into the body element, not into the current parent element of the component.