@vue/runtime-dom 3.6.0-rc.7 → 3.6.0-rc.9

package/dist/runtime-dom.esm-bundler.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/runtime-dom v3.6.0-rc.7
+  * @vue/runtime-dom v3.6.0-rc.9
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -360,50 +360,20 @@ const CSS_VAR_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? "CSS_VAR
 */
 function useCssVars(getter) {
 	const instance = getCurrentInstance();
-	const getVars = () => getter(instance.proxy);
-	const setVars = (vars) => {
-		if (instance.ce) setVarsOnNode(instance.ce, vars);
-		else setVarsOnVNode(instance.subTree, vars);
-	};
-	baseUseCssVars(instance, () => instance.subTree.el.parentNode, getVars, setVars);
-}
-function setVarsOnVNode(vnode, vars) {
-	if (vnode.shapeFlag & 128) {
-		const suspense = vnode.suspense;
-		vnode = suspense.activeBranch;
-		if (suspense.pendingBranch && !suspense.isHydrating) suspense.effects.push(() => {
-			setVarsOnVNode(suspense.activeBranch, vars);
-		});
-	}
-	while (vnode.component) vnode = vnode.component.subTree;
-	if (vnode.shapeFlag & 1 && vnode.el) setVarsOnNode(vnode.el, vars);
-	else if (vnode.type === Fragment) vnode.children.forEach((c) => setVarsOnVNode(c, vars));
-	else if (vnode.type === Static) {
-		let { el, anchor } = vnode;
-		while (el) {
-			setVarsOnNode(el, vars);
-			if (el === anchor) break;
-			el = el.nextSibling;
-		}
-	}
-}
-/**
-* @internal
-* shared between vdom and vapor
-*/
-function baseUseCssVars(instance, getParentNode, getVars, setVars) {
 	/* v8 ignore start */
 	if (!instance) {
 		process.env.NODE_ENV !== "production" && warn(`useCssVars is called without current active component instance.`);
 		return;
 	}
 	/* v8 ignore stop */
+	const getVars = () => getter(instance.proxy);
 	if (!!(process.env.NODE_ENV !== "production")) instance.getCssVars = getVars;
 	const updateTeleports = instance.ut = (vars = getVars()) => {
 		Array.from(document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)).forEach((node) => setVarsOnNode(node, vars));
 	};
 	const applyCssVars = (vars = getVars()) => {
-		setVars(vars);
+		if (instance.ce) setVarsOnNode(instance.ce, vars);
+		else setVarsOnVNode(instance.subTree, vars);
 		updateTeleports(vars);
 	};
 	onBeforeUpdate(() => {
@@ -416,10 +386,37 @@ function baseUseCssVars(instance, getParentNode, getVars, setVars) {
 			applyCssVars(vars);
 		}, NOOP, { flush: "post" });
 		const ob = new MutationObserver(() => applyCssVars());
-		ob.observe(getParentNode(), { childList: true });
+		ob.observe(instance.subTree.el.parentNode, { childList: true });
 		onUnmounted(() => ob.disconnect());
 	});
 }
+function setVarsOnVNode(vnode, vars) {
+	if (vnode.shapeFlag & 128) {
+		const suspense = vnode.suspense;
+		vnode = suspense.activeBranch;
+		if (suspense.pendingBranch && !suspense.isHydrating) suspense.effects.push(() => {
+			setVarsOnVNode(suspense.activeBranch, vars);
+		});
+	}
+	while (vnode.component) {
+		const component = vnode.component;
+		if (component.vapor) {
+			component.appContext.vapor.applyCssVars(vnode, vars);
+			return;
+		}
+		vnode = vnode.component.subTree;
+	}
+	if (vnode.shapeFlag & 1 && vnode.el) setVarsOnNode(vnode.el, vars);
+	else if (vnode.type === Fragment) vnode.children.forEach((c) => setVarsOnVNode(c, vars));
+	else if (vnode.type === Static) {
+		let { el, anchor } = vnode;
+		while (el) {
+			setVarsOnNode(el, vars);
+			if (el === anchor) break;
+			el = el.nextSibling;
+		}
+	}
+}
 /**
 * @internal
 * shared between vdom and vapor
@@ -1675,4 +1672,4 @@ const initDirectivesForSSR = () => {
 	}
 };
 //#endregion
-export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, baseUseCssVars, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, parseEventName, patchProp, patchStyle, render, resolveTransitionProps, setVarsOnNode, shouldSetAsProp, shouldSetAsPropForVueCE, svgNS, unsafeToTrustedHTML, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers, xlinkNS };
+export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, parseEventName, patchClass, patchProp, patchStyle, render, resolveTransitionProps, setVarsOnNode, shouldSetAsProp, shouldSetAsPropForVueCE, svgNS, unsafeToTrustedHTML, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers, xlinkNS };

package/dist/runtime-dom.global.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/runtime-dom v3.6.0-rc.7
+  * @vue/runtime-dom v3.6.0-rc.9
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -149,10 +149,10 @@ var VueRuntimeDOM = (function(exports) {
 	}
 	const listDelimiterRE = /;(?![^(]*\))/g;
 	const propertyDelimiterRE = /:([^]+)/;
-	const styleCommentRE = /\/\*[^]*?\*\//g;
+	const styleCommentRE = /"(?:[^"\\]|\\[^])*"|'(?:[^'\\]|\\[^])*'|\\[^]|\/\*[^]*?\*\//g;
 	function parseStringStyle(cssText) {
 		const ret = {};
-		cssText.replace(styleCommentRE, "").split(listDelimiterRE).forEach((item) => {
+		cssText.replace(styleCommentRE, (match) => match.startsWith("/*") ? "" : match).split(listDelimiterRE).forEach((item) => {
 			if (item) {
 				const tmp = item.split(propertyDelimiterRE);
 				tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
@@ -274,19 +274,19 @@ var VueRuntimeDOM = (function(exports) {
 	}
 	//#endregion
 	//#region packages/shared/src/looseEqual.ts
-	function looseCompareArrays(a, b) {
+	function looseCompareArrays(a, b, seen) {
 		if (a.length !== b.length) return false;
 		let equal = true;
-		for (let i = 0; equal && i < a.length; i++) equal = looseEqual(a[i], b[i]);
+		for (let i = 0; equal && i < a.length; i++) equal = looseEqual(a[i], b[i], seen);
 		return equal;
 	}
-	function looseCompareCollections(a, b) {
+	function looseCompareCollections(a, b, seen) {
 		if (a.size !== b.size) return false;
 		const candidates = Array.from(b);
 		const matched = new Uint8Array(candidates.length);
 		for (const item of a) {
 			let index = -1;
-			for (let i = 0; i < candidates.length; i++) if (!matched[i] && looseEqual(item, candidates[i])) {
+			for (let i = 0; i < candidates.length; i++) if (!matched[i] && looseEqual(item, candidates[i], seen)) {
 				index = i;
 				break;
 			}
@@ -295,7 +295,33 @@ var VueRuntimeDOM = (function(exports) {
 		}
 		return true;
 	}
-	function looseEqual(a, b) {
+	function looseCompareObjects(a, b, seen) {
+		let aValidType = isMap(a);
+		let bValidType = isMap(b);
+		if (aValidType || bValidType) return aValidType && bValidType ? looseCompareCollections(a, b, seen) : false;
+		aValidType = isSet(a);
+		bValidType = isSet(b);
+		if (aValidType || bValidType) return aValidType && bValidType ? looseCompareCollections(a, b, seen) : false;
+		if (Object.keys(a).length !== Object.keys(b).length) return false;
+		for (const key in a) {
+			const aHasKey = a.hasOwnProperty(key);
+			const bHasKey = b.hasOwnProperty(key);
+			if (aHasKey && !bHasKey || !aHasKey && bHasKey || !looseEqual(a[key], b[key], seen)) return false;
+		}
+		return String(a) === String(b);
+	}
+	function looseCompareNested(a, b, seen, compare) {
+		if (!seen) seen = [/* @__PURE__ */ new Map(), /* @__PURE__ */ new Map()];
+		const [seenA, seenB] = seen;
+		if (seenA.has(a) || seenB.has(b)) return seenA.get(a) === b && seenB.get(b) === a;
+		seenA.set(a, b);
+		seenB.set(b, a);
+		const equal = compare(a, b, seen);
+		seenA.delete(a);
+		seenB.delete(b);
+		return equal;
+	}
+	function looseEqual(a, b, seen) {
 		if (a === b) return true;
 		let aValidType = isDate(a);
 		let bValidType = isDate(b);
@@ -305,23 +331,12 @@ var VueRuntimeDOM = (function(exports) {
 		if (aValidType || bValidType) return a === b;
 		aValidType = isArray(a);
 		bValidType = isArray(b);
-		if (aValidType || bValidType) return aValidType && bValidType ? looseCompareArrays(a, b) : false;
+		if (aValidType || bValidType) return aValidType && bValidType ? looseCompareNested(a, b, seen, looseCompareArrays) : false;
 		aValidType = isObject(a);
 		bValidType = isObject(b);
 		if (aValidType || bValidType) {
 			if (!aValidType || !bValidType) return false;
-			aValidType = isMap(a);
-			bValidType = isMap(b);
-			if (aValidType || bValidType) return aValidType && bValidType ? looseCompareCollections(a, b) : false;
-			aValidType = isSet(a);
-			bValidType = isSet(b);
-			if (aValidType || bValidType) return aValidType && bValidType ? looseCompareCollections(a, b) : false;
-			if (Object.keys(a).length !== Object.keys(b).length) return false;
-			for (const key in a) {
-				const aHasKey = a.hasOwnProperty(key);
-				const bHasKey = b.hasOwnProperty(key);
-				if (aHasKey && !bHasKey || !aHasKey && bHasKey || !looseEqual(a[key], b[key])) return false;
-			}
+			return looseCompareNested(a, b, seen, looseCompareObjects);
 		}
 		return String(a) === String(b);
 	}
@@ -451,6 +466,8 @@ var VueRuntimeDOM = (function(exports) {
 	function warn$2(msg, ...args) {
 		console.warn(`[Vue warn] ${msg}`, ...args);
 	}
+	//#endregion
+	//#region packages/reactivity/src/system.ts
 	const notifyBuffer = [];
 	let batchDepth = 0;
 	let activeSub = void 0;
@@ -777,13 +794,17 @@ var VueRuntimeDOM = (function(exports) {
 	/**
 	* Track array iteration and return:
 	* - if input is reactive: a cloned raw array with reactive values
-	* - if input is non-reactive or shallowReactive: the original raw array
+	* - if input is readonly: a cloned raw array with readonly values, preserving
+	*   reactivity
+	* - if input is raw or shallow: the original raw array
 	*/
 	function reactiveReadArray(array) {
 		const raw = /* @__PURE__ */ toRaw(array);
 		if (raw === array) return raw;
 		track(raw, "iterate", ARRAY_ITERATE_KEY);
-		return /* @__PURE__ */ isShallow(array) ? raw : raw.map(toReactive);
+		if (/* @__PURE__ */ isShallow(array)) return raw;
+		if (!/* @__PURE__ */ isReadonly(array)) return raw.map(toReactive);
+		return /* @__PURE__ */ isReactive(array) ? raw.map((item) => toReadonly(toReactive(item))) : raw.map(toReadonly);
 	}
 	/**
 	* Track array iteration and return raw array
@@ -3939,12 +3960,12 @@ var VueRuntimeDOM = (function(exports) {
 					} else {
 						mountComponent(vnode, container, null, parentComponent, parentSuspense, getContainerType(container), optimized);
 						const component = vnode.component;
-						if (!component.subTree && (isAsyncWrapper(vnode) || component.asyncDep && !component.asyncResolved)) {
+						if (!component.subTree && (isAsyncWrapper(vnode) || component.asyncDep)) {
 							let subTree;
 							if (isFragmentStart) {
 								subTree = createVNode(Static);
 								subTree.anchor = nextNode ? nextNode.previousSibling : container.lastChild;
-							} else subTree = node.nodeType === 3 ? createTextVNode("") : createVNode("div");
+							} else subTree = node.nodeType === 3 ? createTextVNode("") : createVNode(node.nodeType === 8 ? Comment : "div");
 							subTree.el = node;
 							component.subTree = subTree;
 						}
@@ -5328,37 +5349,32 @@ var VueRuntimeDOM = (function(exports) {
 	function withAsyncContext(getAwaitable) {
 		const ctx = getCurrentGenericInstance();
 		const inSSRSetup = isInSSRComponentSetup;
-		const restoreAsyncContext = ctx && ctx.restoreAsyncContext ? ctx.restoreAsyncContext.bind(ctx) : void 0;
 		if (!ctx) warn$1("withAsyncContext called without active current instance. This is likely a bug.");
 		let awaitable = getAwaitable();
 		setCurrentInstance(null, void 0);
 		if (inSSRSetup) setInSSRSetupState(false);
 		const restore = () => {
-			const resetStoppedScope = ctx && !ctx.scope.active ? ctx.scope : void 0;
+			const stoppedScope = ctx && !ctx.scope.active ? ctx.scope : void 0;
 			setCurrentInstance(ctx);
 			if (inSSRSetup) setInSSRSetupState(true);
-			const reset = restoreAsyncContext && restoreAsyncContext();
-			return () => {
-				if (reset) reset();
-				if (resetStoppedScope) resetStoppedScope.reset();
-			};
+			return stoppedScope;
 		};
 		const cleanup = () => {
 			setCurrentInstance(null, void 0);
 			if (inSSRSetup) setInSSRSetupState(false);
 		};
 		if (isPromise(awaitable)) awaitable = awaitable.catch((e) => {
-			const reset = restore();
+			const stoppedScope = restore();
 			Promise.resolve().then(() => Promise.resolve().then(() => {
-				if (reset) reset();
+				if (stoppedScope) stoppedScope.reset();
 				cleanup();
 			}));
 			throw e;
 		});
 		return [awaitable, () => {
-			const reset = restore();
+			const stoppedScope = restore();
 			Promise.resolve().then(() => {
-				if (reset) reset();
+				if (stoppedScope) stoppedScope.reset();
 				cleanup();
 			});
 		}];
@@ -6576,6 +6592,10 @@ var VueRuntimeDOM = (function(exports) {
 				optimized = false;
 				n2.dynamicChildren = null;
 			}
+			if (n2.dynamicChildren && n1 && n1.dynamicChildren && n1.dynamicChildren.hasOnce) {
+				if (n2.dynamicChildren === EMPTY_ARR) n2.dynamicChildren = [];
+				n2.dynamicChildren.hasOnce = true;
+			}
 			const { type, ref, shapeFlag } = n2;
 			switch (type) {
 				case Text:
@@ -6892,6 +6912,7 @@ var VueRuntimeDOM = (function(exports) {
 			if (shouldUpdateComponent(n1, n2, optimized)) {
 				if (instance.asyncDep && !instance.asyncResolved) {
 					pushWarningContext(n2);
+					n2.el = n1.el;
 					updateComponentPreRender(instance, n2, optimized);
 					popWarningContext();
 					return;
@@ -7200,13 +7221,13 @@ var VueRuntimeDOM = (function(exports) {
 		};
 		const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => {
 			const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs, cacheIndex, memo } = vnode;
-			if (patchFlag === -2) optimized = false;
+			if (patchFlag === -2 || dynamicChildren && dynamicChildren.hasOnce) optimized = false;
 			if (ref != null) {
 				const prevSub = setActiveSub();
 				setRef(ref, null, parentSuspense, vnode, true);
 				setActiveSub(prevSub);
 			}
-			if (cacheIndex != null) parentComponent.renderCache[cacheIndex] = void 0;
+			if (cacheIndex != null && (!vnode.ctx || vnode.ctx === parentComponent)) parentComponent.renderCache[cacheIndex] = void 0;
 			if (shapeFlag & 256) {
 				if (isVaporComponent(vnode.type)) getVaporInterface(parentComponent, vnode).deactivate(vnode, parentComponent.ctx.getStorageContainer(), parentSuspense);
 				else parentComponent.ctx.deactivate(vnode);
@@ -7260,6 +7281,7 @@ var VueRuntimeDOM = (function(exports) {
 			}
 			if (type === Static) {
 				removeStaticNode(vnode);
+				if (transition && !transition.persisted && transition.afterLeave) transition.afterLeave();
 				return;
 			}
 			if (transition) performTransitionLeave(el, transition, () => hostRemove(el), !!(vnode.shapeFlag & 1));
@@ -7284,7 +7306,10 @@ var VueRuntimeDOM = (function(exports) {
 			if (effect) {
 				effect.stop();
 				unmount(subTree, instance, parentSuspense, doRemove);
-			} else if (doRemove && subTree && instance.vnode.el) remove(subTree);
+			} else if (instance.vnode.el && subTree) {
+				subTree.transition = instance.vnode.transition;
+				unmount(subTree, instance, parentSuspense, doRemove);
+			}
 			if (um) queuePostRenderEffect(um, void 0, parentSuspense);
 			queuePostRenderEffect(() => instance.isUnmounted = true, void 0, parentSuspense);
 			devtoolsComponentRemoved(instance);
@@ -7490,7 +7515,7 @@ var VueRuntimeDOM = (function(exports) {
 		process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) {
 			if (n1 == null) mountSuspense(n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals);
 			else {
-				if (parentSuspense && parentSuspense.deps > 0 && !n1.suspense.isInFallback) {
+				if (parentSuspense && parentSuspense.deps > 0 && !n1.suspense.isInFallback && !parentSuspense.isHydrating) {
 					n2.suspense = n1.suspense;
 					n2.suspense.vnode = n2;
 					n2.el = n1.el;
@@ -7528,7 +7553,9 @@ var VueRuntimeDOM = (function(exports) {
 		if (pendingBranch) {
 			suspense.pendingBranch = newBranch;
 			if (isSameVNodeType(pendingBranch, newBranch)) {
-				patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, namespace, slotScopeIds, optimized);
+				suspense.deps++;
+				patch(pendingBranch, newBranch, isHydrating ? container : suspense.hiddenContainer, null, parentComponent, suspense, namespace, slotScopeIds, optimized);
+				suspense.deps--;
 				if (suspense.deps <= 0) suspense.resolve();
 				else if (isInFallback) {
 					if (!isHydrating && !suspense.isFallbackMountPending) {
@@ -7664,6 +7691,7 @@ var VueRuntimeDOM = (function(exports) {
 				suspense.effects = [];
 				if (isSuspensible) {
 					if (parentSuspense && parentSuspense.pendingBranch && parentSuspenseId === parentSuspense.pendingId) {
+						parentSuspenseId = void 0;
 						parentSuspense.deps--;
 						if (parentSuspense.deps === 0 && !sync) parentSuspense.resolve();
 					}
@@ -7701,11 +7729,16 @@ var VueRuntimeDOM = (function(exports) {
 			registerDep(instance, onResolve) {
 				const isInPendingSuspense = !!suspense.pendingBranch;
 				if (isInPendingSuspense) suspense.deps++;
+				const hydratedEl = instance.vnode && instance.vnode.el;
 				instance.asyncDep.catch((err) => {
 					handleError(err, instance, 0);
 				}).then((asyncSetupResult) => {
 					if (instance.isUnmounted || suspense.isUnmounted || suspense.pendingId !== instance.suspenseId) return;
 					setCurrentInstance(null, void 0);
+					if (hydratedEl && !instance.scope.active) {
+						if (isInPendingSuspense && --suspense.deps === 0) suspense.resolve();
+						return;
+					}
 					instance.asyncResolved = true;
 					onResolve(asyncSetupResult);
 					if (isInPendingSuspense && --suspense.deps === 0) suspense.resolve();
@@ -8018,7 +8051,8 @@ var VueRuntimeDOM = (function(exports) {
 			vs: cloneVaporSlotMeta(vnode),
 			vb: vnode.vb,
 			ibu: vnode.ibu,
-			iu: vnode.iu
+			iu: vnode.iu,
+			cacheIndex: vnode.cacheIndex
 		};
 		if (transition && cloneTransition) setTransitionHooks(cloned, transition.clone(cloned));
 		return cloned;
@@ -8718,7 +8752,7 @@ var VueRuntimeDOM = (function(exports) {
 	}
 	//#endregion
 	//#region packages/runtime-core/src/index.ts
-	const version = "3.6.0-rc.7";
+	const version = "3.6.0-rc.9";
 	const warn = warn$1;
 	/**
 	* Runtime error messages. Only exposed in dev or esm builds.
@@ -9091,49 +9125,20 @@ var VueRuntimeDOM = (function(exports) {
 	*/
 	function useCssVars(getter) {
 		const instance = getCurrentInstance();
-		const getVars = () => getter(instance.proxy);
-		const setVars = (vars) => {
-			if (instance.ce) setVarsOnNode(instance.ce, vars);
-			else setVarsOnVNode(instance.subTree, vars);
-		};
-		baseUseCssVars(instance, () => instance.subTree.el.parentNode, getVars, setVars);
-	}
-	function setVarsOnVNode(vnode, vars) {
-		if (vnode.shapeFlag & 128) {
-			const suspense = vnode.suspense;
-			vnode = suspense.activeBranch;
-			if (suspense.pendingBranch && !suspense.isHydrating) suspense.effects.push(() => {
-				setVarsOnVNode(suspense.activeBranch, vars);
-			});
-		}
-		while (vnode.component) vnode = vnode.component.subTree;
-		if (vnode.shapeFlag & 1 && vnode.el) setVarsOnNode(vnode.el, vars);
-		else if (vnode.type === Fragment) vnode.children.forEach((c) => setVarsOnVNode(c, vars));
-		else if (vnode.type === Static) {
-			let { el, anchor } = vnode;
-			while (el) {
-				setVarsOnNode(el, vars);
-				if (el === anchor) break;
-				el = el.nextSibling;
-			}
-		}
-	}
-	/**
-	* @internal
-	* shared between vdom and vapor
-	*/
-	function baseUseCssVars(instance, getParentNode, getVars, setVars) {
 		/* v8 ignore start */
 		if (!instance) {
 			warn(`useCssVars is called without current active component instance.`);
 			return;
 		}
+		/* v8 ignore stop */
+		const getVars = () => getter(instance.proxy);
 		instance.getCssVars = getVars;
 		const updateTeleports = instance.ut = (vars = getVars()) => {
 			Array.from(document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)).forEach((node) => setVarsOnNode(node, vars));
 		};
 		const applyCssVars = (vars = getVars()) => {
-			setVars(vars);
+			if (instance.ce) setVarsOnNode(instance.ce, vars);
+			else setVarsOnVNode(instance.subTree, vars);
 			updateTeleports(vars);
 		};
 		onBeforeUpdate(() => {
@@ -9146,10 +9151,37 @@ var VueRuntimeDOM = (function(exports) {
 				applyCssVars(vars);
 			}, NOOP, { flush: "post" });
 			const ob = new MutationObserver(() => applyCssVars());
-			ob.observe(getParentNode(), { childList: true });
+			ob.observe(instance.subTree.el.parentNode, { childList: true });
 			onUnmounted(() => ob.disconnect());
 		});
 	}
+	function setVarsOnVNode(vnode, vars) {
+		if (vnode.shapeFlag & 128) {
+			const suspense = vnode.suspense;
+			vnode = suspense.activeBranch;
+			if (suspense.pendingBranch && !suspense.isHydrating) suspense.effects.push(() => {
+				setVarsOnVNode(suspense.activeBranch, vars);
+			});
+		}
+		while (vnode.component) {
+			const component = vnode.component;
+			if (component.vapor) {
+				component.appContext.vapor.applyCssVars(vnode, vars);
+				return;
+			}
+			vnode = vnode.component.subTree;
+		}
+		if (vnode.shapeFlag & 1 && vnode.el) setVarsOnNode(vnode.el, vars);
+		else if (vnode.type === Fragment) vnode.children.forEach((c) => setVarsOnVNode(c, vars));
+		else if (vnode.type === Static) {
+			let { el, anchor } = vnode;
+			while (el) {
+				setVarsOnNode(el, vars);
+				if (el === anchor) break;
+				el = el.nextSibling;
+			}
+		}
+	}
 	/**
 	* @internal
 	* shared between vdom and vapor