From: daiwei <daiwei521@126.com>
Date: Mon, 10 Nov 2025 08:30:12 +0000 (+0800)
Subject: wip: support set style vars on custom element
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=03a9bb9460ea489a20a15ad51b9e632671712d59;p=thirdparty%2Fvuejs%2Fcore.git

wip: support set style vars on custom element
---

diff --git a/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts
index 1352760d13..66f56c6752 100644
--- a/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts
@@ -1,7 +1,9 @@
 import {
   createComponent,
   createIf,
+  createPlainElement,
   defineVaporComponent,
+  defineVaporCustomElement,
   renderEffect,
   setStyle,
   template,
@@ -237,7 +239,29 @@ describe('useVaporCssVars', () => {
     }
   })
 
-  test.todo('with custom element', async () => {})
+  test('with custom element', async () => {
+    const state = reactive({ color: 'red' })
+    const CE = defineVaporCustomElement({
+      setup() {
+        useVaporCssVars(() => state)
+        return template('<div>hello</div>', true)()
+      },
+    })
+
+    customElements.define('css-vars-ce', CE)
+
+    const { html } = define({
+      setup() {
+        return createPlainElement('css-vars-ce', null, null, true)
+      },
+    }).render()
+
+    expect(html()).toBe('<css-vars-ce style="--color: red;"></css-vars-ce>')
+
+    state.color = 'green'
+    await nextTick()
+    expect(html()).toBe('<css-vars-ce style="--color: green;"></css-vars-ce>')
+  })
 
   test('should set vars before child component onMounted hook', () => {
     const state = reactive({ color: 'red' })
diff --git a/packages/runtime-vapor/src/helpers/useCssVars.ts b/packages/runtime-vapor/src/helpers/useCssVars.ts
index 9a67ae6bfd..a807ffa274 100644
--- a/packages/runtime-vapor/src/helpers/useCssVars.ts
+++ b/packages/runtime-vapor/src/helpers/useCssVars.ts
@@ -1,4 +1,5 @@
 import {
+  type GenericComponentInstance,
   baseUseCssVars,
   currentInstance,
   setVarsOnNode,
@@ -14,7 +15,7 @@ export function useVaporCssVars(getter: () => Record<string, string>): void {
     instance,
     () => resolveParentNode(instance.block),
     getter,
-    vars => setVarsOnBlock(instance.block, vars),
+    vars => setVars(instance, vars),
   )
 }
 
@@ -30,6 +31,17 @@ function resolveParentNode(block: Block): Node {
   }
 }
 
+function setVars(
+  instance: VaporComponentInstance,
+  vars: Record<string, string>,
+): void {
+  if ((instance as GenericComponentInstance).ce) {
+    setVarsOnNode((instance as GenericComponentInstance).ce as any, vars)
+  } else {
+    setVarsOnBlock(instance.block, vars)
+  }
+}
+
 function setVarsOnBlock(block: Block, vars: Record<string, string>): void {
   if (block instanceof Node) {
     setVarsOnNode(block, vars)