diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 3ed42ed0b55..ff24df9fccf 100644 --- 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) => void + ut?: (target: RendererElement | null, vars?: Record) => 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 5def1b2d721..881fe8e7d87 100644 --- 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(vnode.target) } } diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index e57705304bf..4ae713c9b24 100644 --- 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): 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): void { } else { setVarsOnVNode(instance.subTree, vars) } - updateTeleports(vars) + updateTeleports(document, vars) } onBeforeMount(() => {