fix(runtime): CSSVars can work with Teleport

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

@@ -28,7 +28,7 @@ const isTeleportDisabled = (props: VNode['props']): boolean =>
 const isTargetSVG = (target: RendererElement): boolean =>
   typeof SVGElement !== 'undefined' && target instanceof SVGElement
 
-const resolveTarget = <T = RendererElement>(
+export const resolveTarget = <T = RendererElement>(
   props: TeleportProps | null,
   select: RendererOptions['querySelector']
 ): T | null => {
@@ -396,13 +396,13 @@ export const Teleport = TeleportImpl as unknown as {
   new (): { $props: VNodeProps & TeleportProps }
 }
 
-function updateCssVars(vnode: VNode) {
+export function updateCssVars(vnode: VNode) {
   // presence of .ut method indicates owner component uses css vars.
   // code path here can assume browser environment.
   const ctx = vnode.ctx
   if (ctx && ctx.ut) {
     let node = (vnode.children as VNode[])[0].el!
-    while (node !== vnode.targetAnchor) {
+    while (node && node !== vnode.targetAnchor) {
       if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
       node = node.nextSibling
     }

packages/runtime-core/src/index.ts

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

packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

@@ -9,7 +9,14 @@ import {
   ComponentOptions,
   Suspense,
   Teleport,
-  FunctionalComponent
+  FunctionalComponent,
+  renderSlot,
+  withCtx,
+  openBlock,
+  createElementBlock,
+  createCommentVNode,
+  createVNode,
+  Transition
 } from '@vue/runtime-dom'
 
 describe('useCssVars', () => {
@@ -275,4 +282,112 @@ describe('useCssVars', () => {
       expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
     }
   })
+
+  test('with teleport(component & v-if slot)', async () => {
+    document.body.innerHTML = ''
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const target = document.body
+    const toggle = ref(true)
+    const comp = {
+      render(ctx: any) {
+        return renderSlot(ctx.$slots, 'default')
+      }
+    }
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => [
+          h(Teleport, { to: target }, [
+            h(
+              comp,
+              {},
+              {
+                default: withCtx(() => [
+                  toggle.value
+                    ? (openBlock(),
+                      createElementBlock(
+                        'div',
+                        {
+                          key: 0,
+                          class: 'text'
+                        },
+                        ' test '
+                      ))
+                    : createCommentVNode('v-if', true)
+                ]),
+                _: 1
+              }
+            )
+          ])
+        ]
+      }
+    }
+
+    render(h(App), 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')
+    }
+
+    toggle.value = false
+    await nextTick()
+    toggle.value = true
+    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')
+    }
+  })
+
+  test('with teleport(transition & v-if slot)', async () => {
+    document.body.innerHTML = ''
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const target = document.body
+    const toggle = ref(true)
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => [
+          h(Teleport, { to: target }, [
+            createVNode(Transition, null, {
+              default: withCtx(() => [
+                toggle.value
+                  ? (openBlock(),
+                    createElementBlock(
+                      'div',
+                      {
+                        key: 0,
+                        class: 'text'
+                      },
+                      'test'
+                    ))
+                  : createCommentVNode('v-if', true)
+              ]),
+              _: 1 /* STABLE */
+            })
+          ])
+        ]
+      }
+    }
+
+    render(h(App), 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')
+    }
+
+    toggle.value = false
+    await nextTick()
+    toggle.value = true
+    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')
+    }
+  })
 })

packages/runtime-dom/src/helpers/useCssVars.ts

@@ -6,10 +6,13 @@ import {
   Static,
   watchPostEffect,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  resolveTarget,
+  TeleportProps,
+  updateCssVars
 } from '@vue/runtime-core'
-import { ShapeFlags } from '@vue/shared'
-
+import { ShapeFlags, isArray } from '@vue/shared'
+import { nodeOps } from '../nodeOps'
 /**
  * Runtime helper for SFC's CSS variable injection feature.
  * @private
@@ -26,9 +29,11 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
   }
 
   const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
-    Array.from(
-      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
-    ).forEach(node => setVarsOnNode(node, vars))
+    if (document) {
+      Array.from(
+        document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+      ).forEach(node => setVarsOnNode(node, vars))
+    }
   })
 
   const setVars = () => {
@@ -40,12 +45,32 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
   watchPostEffect(setVars)
 
   onMounted(() => {
-    const ob = new MutationObserver(setVars)
-    ob.observe(instance.subTree.el!.parentNode, { childList: true })
-    onUnmounted(() => ob.disconnect())
+    const obs = [onSubTreeChange(instance.subTree.el!.parentNode, setVars)]
+    const observeTeleportTarget = (vnode: VNode) => {
+      if (vnode.shapeFlag & ShapeFlags.TELEPORT) {
+        const target = resolveTarget(
+          vnode.props as TeleportProps,
+          nodeOps.querySelector
+        ) as Node
+        if (target) {
+          obs.push(onSubTreeChange(target, () => updateCssVars(vnode)))
+        }
+      }
+      if (isArray(vnode.children)) {
+        vnode.children.forEach(n => observeTeleportTarget(n as VNode))
+      }
+    }
+    observeTeleportTarget(instance.subTree)
+    onUnmounted(() => obs.forEach(ob => ob.disconnect()))
   })
 }
 
+function onSubTreeChange(target: Node, cb: () => void): MutationObserver {
+  const ob = new MutationObserver(cb)
+  ob.observe(target, { childList: true })
+  return ob
+}
+
 function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
   if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
     const suspense = vnode.suspense!