wip: support set style vars on custom element

Author: edison1105

packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts

@@ -1,7 +1,9 @@
 import {
   createComponent,
   createIf,
+  createPlainElement,
   defineVaporComponent,
+  defineVaporCustomElement,
   renderEffect,
   setStyle,
   template,
@@ -258,4 +260,30 @@ describe('useVaporCssVars', () => {
 
     expect(colorInOnMount).toBe(`red`)
   })
+
+  test('with custom element', () => {
+    const CE = defineVaporCustomElement({
+      setup() {
+        useVaporCssVars(() => ({
+          v727f5271: color.value,
+        }))
+
+        const color = ref('red')
+        return template('<h1></h1>', true)()
+      },
+    })
+
+    customElements.define('custom-el-with-css-vars', CE)
+
+    const { html } = define({
+      setup() {
+        return createPlainElement('custom-el-with-css-vars', null, null, true)
+      },
+    }).render()
+
+    // should have css vars
+    expect(html()).toBe(
+      '<custom-el-with-css-vars style="--v727f5271: red;"></custom-el-with-css-vars>',
+    )
+  })
 })

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)