A modal rendered inside a component with overflow: hidden or a transform is clipped by an ancestor no amount of z-index will escape.
<Teleport to="body">
<div v-if="open" class="modal-backdrop">
<div class="modal"><slot /></div>
</div>
</Teleport>
<!-- the DOM node moves to body; the component tree does not.
props, provide/inject, events and the component's
reactive scope all behave as if it were still here. -->
Keeping the logical position while moving the physical one is the whole feature, and it is what distinguishes this from rendering into a portal by hand. The target must exist when the Teleport mounts, so teleporting into another component’s element is an ordering dependency that will eventually bite. Focus management is not handled — a modal still needs a focus trap and a return of focus on close, and Teleport does nothing about either.