Vue 3 teleport

• Vue 3 teleport es otra de las nuevas características para hacernos la vida más sencilla en determinadas situaciones.
• Como pone en la documentación, Vue recomienda encapsular la presentación y el comportamiento en componentes. Desde el punto de vista técnico esto es genial, pero hay veces que a nivel de estructura y estilos lo mejor sería tener dos partes separadas.
• Uno de los casos más típicos son los componentes modales. Lo idea es mantenerlos lo más encapsulados posibles (todo en el mismo componente), pero por las características de posicionamiento CSS y su herencia y cascada esto resulta complicado.
• En nuestro ejemplo tenemos un componente llamado ModalComponent.vue que tiene un botón que conmuta su visualización. Usamos position:absolute en el elemento que contiene el texto para colocarlo en el centro de la pantalla, contando con que la referencia será body pero, ¿ qué ocurre si hay otros estilos que interfieren?.
• Por ejemplo, supongamos que hay un elemento que envuelve toda la aplicación y que tiene relative como valor de position.
• Todo se va al traste. Podemos arreglarlo jugando con z-index o con el tamaño de altura y volvería a funcionar, pero ya sabes que esto suele ser mala idea ya que para arreglar un problema estás creando otros más.
• Además habría situaciones más complicadas de solucionar aún. Imagina que el elemento principal tuviera un filtro aplicado o fuese transparente.
• En lugar de trastear con el código tratando de neutralizar los estilos heredados podemos usar teleport. Como el nombre indica permite definir la lógica en un sitio pero presentarlo en otro lugar, aunque físicamente ambas partes estén en el mismo documento.
• Si envolvemos nuestro elemento con clase modal en teleport y a través de su atributo to indicamos que lo queremos teletransportar a body.

<teleport to="body">  // Indicamos dónde queremos "teletransportarlo"
    <div class="modal" v-if="modalOpen">
        <h2>Modal title</h2>
	      ...
        <button @click="modalOpen = false">Close modal</button>
    </div>
</teleport>

• Importante recalcar que sólo podemos teletransportar elementos fuera del elemento al que se ancla la instancia princial de Vue, generalmente con id #app.
• Independientemente, una vez establecido el teleport, problema solucionado.