fix(runtime): CSSVars can work with Teleport

packages/runtime-core/__tests__/components/Suspense.spec.ts

@@ -8,24 +8,34 @@ import {
   KeepAlive,
   Suspense,
   type SuspenseProps,
+  Teleport,
   h,
   nextTick,
   nodeOps,
   onErrorCaptured,
   onMounted,
   onUnmounted,
+  reactive,
   ref,
   render,
   resolveDynamicComponent,
   serializeInner,
   shallowRef,
   watch,
   watchEffect,
+  withCtx,
 } from '@vue/runtime-test'
-import { computed, createApp, defineComponent, inject, provide } from 'vue'
+import {
+  computed,
+  createApp,
+  defineComponent,
+  inject,
+  provide,
+  useCssVars,
+} from 'vue'
 import type { RawSlots } from 'packages/runtime-core/src/componentSlots'
 import { resetSuspenseId } from '../../src/components/Suspense'
-
+import { render as runtimeRender } from '@vue/runtime-dom'
 describe('Suspense', () => {
   const deps: Promise<any>[] = []
 
@@ -2075,6 +2085,47 @@ describe('Suspense', () => {
     await Promise.all(deps)
   })
 
+  test('suspense can render CssVars correctly in teleport', async () => {
+    document.body.innerHTML = ''
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const target = document.body
+    const Async = defineAsyncComponent({
+      render() {
+        return h('div', 'async')
+      },
+    })
+
+    const Comp = {
+      setup() {
+        useCssVars(() => state)
+        return () =>
+          h(Teleport, { to: target }, [
+            h(Suspense, null, {
+              default: withCtx(() => h(Async)),
+              fallback: withCtx(() => h('div', 'fallback')),
+            }),
+          ])
+      },
+    }
+
+    runtimeRender(h(Comp), root)
+    await nextTick()
+    expect(target.children.length).toBe(1)
+    for (const c of [].slice.call(target.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+    expect(target.children[0].innerHTML).toBe('fallback')
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(target.children.length).toBe(1)
+    for (const c of [].slice.call(target.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+    expect(target.children[0].innerHTML).toBe('async')
+  })
+
   describe('warnings', () => {
     // base function to check if a combination of slots warns or not
     function baseCheckWarn(

packages/runtime-core/src/components/Teleport.ts

@@ -7,10 +7,16 @@ import {
   type RendererInternals,
   type RendererNode,
   type RendererOptions,
+  queuePostRenderEffect,
   traverseStaticChildren,
 } from '../renderer'
-import type { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
-import { ShapeFlags, isString } from '@vue/shared'
+import type {
+  VNode,
+  VNodeArrayChildren,
+  VNodeNormalizedChildren,
+  VNodeProps,
+} from '../vnode'
+import { ShapeFlags, isArray, isString } from '@vue/shared'
 import { warn } from '../warning'
 import { isHmrUpdating } from '../hmr'
 
@@ -20,9 +26,69 @@ export interface TeleportProps {
   to: string | RendererElement | null | undefined
   disabled?: boolean
 }
+export const teleportUTMap: Record<
+  number,
+  ((vars?: Record<string, string>) => void) | null
+> = {}
 
 export const isTeleport = (type: any): boolean => type.__isTeleport
-
+/**
+ * @private
+ */
+export const setTeleportOwnerAttrToEl = (
+  props: (VNodeProps & { [key: string]: any }) | null,
+  vnode: VNode,
+) => {
+  const teleportIds = vnode.teleportIds
+  if (teleportIds !== null && teleportIds !== undefined) {
+    if (!props) {
+      props = {}
+    }
+    props['data-v-owner'] = teleportIds[teleportIds.length - 1]
+  }
+  return props
+}
+/**
+ * In the fast path, sometimes element updates will not re-update `teleport`
+ * E.g
+ * <teleport to="body">
+ *     <Comp>
+ *        <div class="text" v-if="showThing">
+ *         test
+ *       </div>
+ *     </Comp>
+ *   </teleport>
+ * TODO: comment
+ * @private
+ */
+export const updateTeleportsCssVarsFast = (
+  vnode: VNode,
+  parentSuspense: SuspenseBoundary | null,
+) => {
+  queuePostRenderEffect(() => {
+    const teleportIds = vnode.teleportIds
+    if (teleportIds !== null && teleportIds !== undefined) {
+      teleportIds.forEach((id: number) => {
+        if (teleportUTMap[id]) {
+          teleportUTMap[id]!()
+        }
+      })
+    }
+  }, parentSuspense)
+}
+export const setTeleportIdTOVNode = (
+  vnode: VNode,
+  parentComponent: ComponentInternalInstance | null,
+) => {
+  if (parentComponent) {
+    if (
+      parentComponent.vnode.teleportIds !== null &&
+      parentComponent.vnode.teleportIds !== undefined
+    ) {
+      vnode.teleportIds = parentComponent.vnode.teleportIds
+    }
+  }
+}
 const isTeleportDisabled = (props: VNode['props']): boolean =>
   props && (props.disabled || props.disabled === '')
 
@@ -110,6 +176,9 @@ export const TeleportImpl = {
       insert(mainAnchor, container, anchor)
       const target = (n2.target = resolveTarget(n2.props, querySelector))
       const targetAnchor = (n2.targetAnchor = createText(''))
+
+      initTeleportIds(children, n2)
+
       if (target) {
         insert(targetAnchor, target)
         // #2652 we could be teleporting from a non-SVG tree into an SVG tree
@@ -393,7 +462,6 @@ function hydrateTeleport(
             break
           }
         }
-
         hydrateChildren(
           targetNode,
           vnode,
@@ -434,3 +502,23 @@ function updateCssVars(vnode: VNode) {
     ctx.ut()
   }
 }
+
+function initTeleportIds(children: VNodeNormalizedChildren, vnode: VNode) {
+  if (!children) return
+  const ctx = vnode.ctx
+  if (children && isArray(children)) {
+    ;(children as VNode[]).forEach((c: VNode | null) => {
+      if (c && c.__v_isVNode && ctx && ctx.ut && (ctx.uid || ctx.uid === 0)) {
+        if (!c.teleportIds) c.teleportIds = []
+        c.teleportIds.push(ctx.uid)
+
+        if (c.ssContent && !c.ssContent.teleportIds) {
+          if (!c.ssContent.teleportIds) {
+            c.ssContent.teleportIds = []
+          }
+          c.ssContent.teleportIds.push(ctx.uid)
+        }
+      }
+    })
+  }
+}

packages/runtime-core/src/index.ts

@@ -101,7 +101,11 @@ export { createVNode, cloneVNode, mergeProps, isVNode } from './vnode'
 // VNode types
 export { Fragment, Text, Comment, Static, type VNodeRef } from './vnode'
 // Built-in components
-export { Teleport, type TeleportProps } from './components/Teleport'
+export {
+  Teleport,
+  type TeleportProps,
+  teleportUTMap,
+} from './components/Teleport'
 export { Suspense, type SuspenseProps } from './components/Suspense'
 export { KeepAlive, type KeepAliveProps } from './components/KeepAlive'
 export {

packages/runtime-core/src/renderer.ts

@@ -57,6 +57,11 @@ import {
   queueEffectWithSuspense,
 } from './components/Suspense'
 import type { TeleportImpl, TeleportVNode } from './components/Teleport'
+import {
+  setTeleportIdTOVNode,
+  setTeleportOwnerAttrToEl,
+  updateTeleportsCssVarsFast,
+} from './components/Teleport'
 import { type KeepAliveContext, isKeepAlive } from './components/KeepAlive'
 import { isHmrUpdating, registerHMR, unregisterHMR } from './hmr'
 import { type RootHydrateFunction, createHydrationFunctions } from './hydration'
@@ -592,7 +597,7 @@ function baseCreateRenderer(
     } else if (n2.type === 'math') {
       namespace = 'mathml'
     }
-
+    setTeleportIdTOVNode(n2, parentComponent)
     if (n1 == null) {
       mountElement(
         n2,
@@ -629,8 +634,8 @@ function baseCreateRenderer(
   ) => {
     let el: RendererElement
     let vnodeHook: VNodeHook | undefined | null
-    const { props, shapeFlag, transition, dirs } = vnode
-
+    const { shapeFlag, transition, dirs } = vnode
+    let props = setTeleportOwnerAttrToEl(vnode.props, vnode)
     el = vnode.el = hostCreateElement(
       vnode.type as string,
       namespace,
@@ -714,6 +719,9 @@ function baseCreateRenderer(
       transition!.beforeEnter(el)
     }
     hostInsert(el, container, anchor)
+
+    updateTeleportsCssVarsFast(vnode, parentSuspense)
+
     if (
       (vnodeHook = props && props.onVnodeMounted) ||
       needCallTransitionHooks ||
@@ -1079,6 +1087,8 @@ function baseCreateRenderer(
         : fragmentSlotScopeIds
     }
 
+    setTeleportIdTOVNode(n2, parentComponent)
+
     if (n1 == null) {
       hostInsert(fragmentStartAnchor, container, anchor)
       hostInsert(fragmentEndAnchor, container, anchor)
@@ -1164,6 +1174,9 @@ function baseCreateRenderer(
     optimized: boolean,
   ) => {
     n2.slotScopeIds = slotScopeIds
+
+    setTeleportIdTOVNode(n2, parentComponent)
+
     if (n1 == null) {
       if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
         ;(parentComponent!.ctx as KeepAliveContext).activate(

packages/runtime-core/src/vnode.ts

@@ -233,6 +233,7 @@ export interface VNode<
    * @internal custom element interception hook
    */
   ce?: (instance: ComponentInternalInstance) => void
+  teleportIds?: number[]
 }
 
 // Since v-if and v-for are the two possible ways node structure can dynamically