3.5: deferred teleport

Author: yyx990803

src/api/built-in-components.md

@@ -286,6 +286,12 @@ Renders its slot content to another part of the DOM.
      * Can be changed dynamically.
      */
     disabled?: boolean
+    /**
+     * When `true`, the Teleport will defer until other
+     * parts of the application have been mounted before
+     * resolving its target. (3.5+)
+     */
+    defer?: boolean
   }
   ```
 
@@ -307,6 +313,15 @@ Renders its slot content to another part of the DOM.
   </Teleport>
   ```
 
+  Defer target resolution <sup class="vt-badge" data-text="3.5+" />:
+
+  ```vue-html
+  <Teleport defer to="#late-div">...</Teleport>
+
+  <!-- somewhere later in the template -->
+  <div id="late-div"></div>
+  ```
+
 - **See also** [Guide - Teleport](/guide/built-ins/teleport)
 
 ## `<Suspense>` <sup class="vt-badge experimental" /> {#suspense}

src/guide/built-ins/teleport.md

@@ -195,6 +195,19 @@ The rendered result would be:
 </div>
 ```
 
+## Deferred Teleport <sup class="vt-badge" data-text="3.5+" /> {#deferred-teleport}
+
+In Vue 3.5 and above, we can use the `defer` prop to defer the target resolving of a Teleport until other parts of the application have mounted. This allows the Teleport to target a container element that is rendered by Vue, but in a later part of the component tree:
+
+```vue-html
+<Teleport defer to="#late-div">...</Teleport>
+
+<!-- somewhere later in the template -->
+<div id="late-div"></div>
+```
+
+Note that the target element must be rendered in the same mount / update tick with the Teleport - i.e. if the `<div>` is only mounted a second later, the Teleport will still report an error. The defer works similarly to the `mounted` lifecycle hook.
+
 ---
 
 **Related**