fix(teleport): apply css vars after hydration (#14343)

diff --git a/packages/runtime-vapor/__tests__/hydration.spec.ts b/packages/runtime-vapor/__tests__/hydration.spec.ts
index 6a4066163a865cb6c559593cc481c1e43c71659b..f64aea1246a8935b483f79a58aeefb4be069727d 100644 (file)
--- a/packages/runtime-vapor/__tests__/hydration.spec.ts
+++ b/packages/runtime-vapor/__tests__/hydration.spec.ts
@@ -1,4 +1,5 @@
 import {
+  VaporTeleport,
   child,
   createComponent,
   createPlainElement,
@@ -3584,6 +3585,49 @@ describe('Vapor Mode hydration', () => {
         `<!--teleport start--><span>bar</span><!--teleport end-->`,
       )
     })
+
+    test('should apply css vars after hydration', async () => {
+      const state = reactive({ color: 'red' })
+
+      const teleportContainer = document.createElement('div')
+      teleportContainer.id = 'teleport-css-vars'
+      teleportContainer.innerHTML =
+        `<!--teleport start anchor-->` +
+        `<span>content</span>` +
+        `<!--teleport anchor-->`
+      document.body.appendChild(teleportContainer)
+
+      const App = defineVaporComponent({
+        setup() {
+          useVaporCssVars(() => state)
+          return createComponent(
+            VaporTeleport,
+            { to: () => '#teleport-css-vars' },
+            { default: () => template('<span>content</span>', true)() },
+          )
+        },
+      })
+
+      const container = document.createElement('div')
+      container.innerHTML = '<!--teleport start--><!--teleport end-->'
+      document.body.appendChild(container)
+
+      const app = createVaporSSRApp(App)
+      app.mount(container)
+
+      await nextTick()
+
+      // css vars should be applied after hydration
+      const span = teleportContainer.querySelector('span') as HTMLElement
+      expect(span).toBeTruthy()
+      expect(span.style.getPropertyValue('--color')).toBe('red')
+      expect(span.hasAttribute('data-v-owner')).toBe(true)
+
+      // css vars should update reactively
+      state.color = 'green'
+      await nextTick()
+      expect(span.style.getPropertyValue('--color')).toBe('green')
+    })
   })
 
   describe('async component', async () => {

diff --git a/packages/runtime-vapor/src/components/Teleport.ts b/packages/runtime-vapor/src/components/Teleport.ts
index 738766a4e049acd0e82965a01c16e00e742d2d4a..785c410d22f4f372409b43300e1f1a2fd10203c0 100644 (file)
--- a/packages/runtime-vapor/src/components/Teleport.ts
+++ b/packages/runtime-vapor/src/components/Teleport.ts
@@ -344,6 +344,7 @@ export class TeleportFragment extends VaporFragment {
       this.hydrateDisabledTeleport(currentHydrationNode!)
     }
 
+    updateCssVars(this)
     advanceHydrationNode(this.anchor!)
   }
 }