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

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 3ed42ed0b55bec8c89976c6d010c878b7b196325..f8fc1a22421f049a6c91196de9722c0148e4407d 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/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

diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 5def1b2d72198591740f29b1514a1472a904bcb9..35c4c6ebe7102c6d58aeee05ae35fcd5893c65c4 100644 (file)
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/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)
   }
 }
 

diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index e57705304bfe679b106dab258e04251d1ecb24b2..4ae713c9b24ff7031f84eaad88201fa6f6f4dd49 100644 (file)
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/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(() => {