feat(teleport/css-v-bind): support for getting teleported content via target

Author: edison1105

packages/runtime-core/src/component.ts

@@ -582,7 +582,7 @@ export interface ComponentInternalInstance {
    * For updating css vars on contained teleports
    * @internal
    */
-  ut?: (vars?: Record<string, string>) => void
+  ut?: (target: RendererElement, vars?: Record<string, string>) => void
 
   /**
    * dev only. For style v-bind hydration mismatch checks

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

@@ -480,7 +480,7 @@ function updateCssVars(vnode: VNode, isDisabled: boolean) {
       if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
       node = node.nextSibling
     }
-    ctx.ut()
+    ctx.ut(node.target)
   }
 }
 

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

@@ -28,9 +28,14 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>): void {
   }
   /* v8 ignore stop */
 
-  const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
+  const updateTeleports = (instance.ut = (
+    target,
+    vars = getter(instance.proxy),
+  ) => {
     Array.from(
-      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),
+      ((target as Element) || document).querySelectorAll(
+        `[data-v-owner="${instance.uid}"]`,
+      ),
     ).forEach(node => setVarsOnNode(node, vars))
   })
 
@@ -45,7 +50,7 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>): void {
     } else {
       setVarsOnVNode(instance.subTree, vars)
     }
-    updateTeleports(vars)
+    updateTeleports(document, vars)
   }
 
   onBeforeMount(() => {