From 8631cfb68f3ca413392754085b0307b783798398 Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 31 Oct 2024 18:02:28 +0800 Subject: [PATCH 1/2] feat(teleport/css-v-bind): support for getting teleported content via target --- packages/runtime-core/src/component.ts | 2 +- packages/runtime-core/src/components/Teleport.ts | 2 +- packages/runtime-dom/src/helpers/useCssVars.ts | 11 ++++++++--- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 3ed42ed0b55..f8fc1a22421 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, 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..35c4c6ebe71 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(node.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(() => { From 71284faa967a3b8ab29d1f78a51d45f72a0f5905 Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 31 Oct 2024 20:42:52 +0800 Subject: [PATCH 2/2] chore: update --- packages/runtime-core/src/component.ts | 2 +- packages/runtime-core/src/components/Teleport.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index f8fc1a22421..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?: (target: RendererElement, 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 35c4c6ebe71..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(node.target) + ctx.ut(vnode.target) } }