From: edison <daiwei521@126.com>
Date: Mon, 17 Nov 2025 07:36:53 +0000 (+0800)
Subject: test(hydration): force hydrate custom element with dynamic props (#14102)
X-Git-Tag: v3.6.0-alpha.5~16
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=888d953c0063360976fb8b11891adcb46b76d610;p=thirdparty%2Fvuejs%2Fcore.git

test(hydration): force hydrate custom element with dynamic props (#14102)
---

diff --git a/packages/runtime-vapor/__tests__/hydration.spec.ts b/packages/runtime-vapor/__tests__/hydration.spec.ts
index 7094a0f60a..8beb89edb9 100644
--- a/packages/runtime-vapor/__tests__/hydration.spec.ts
+++ b/packages/runtime-vapor/__tests__/hydration.spec.ts
@@ -1,4 +1,5 @@
 import {
+  createPlainElement,
   createVaporSSRApp,
   defineVaporAsyncComponent,
   delegateEvents,
@@ -4031,8 +4032,26 @@ describe('Vapor Mode hydration', () => {
       expect((container.firstChild! as any).foo).toBe(true)
     })
 
-    // vapor custom element not implemented yet
-    test.todo('force hydrate custom element with dynamic props', () => {})
+    test('force hydrate custom element with dynamic props', () => {
+      class MyElement extends HTMLElement {
+        foo = ''
+        constructor() {
+          super()
+        }
+      }
+      customElements.define('my-element-7203', MyElement)
+
+      const msg = ref('bar')
+      const container = document.createElement('div')
+      container.innerHTML = '<my-element-7203></my-element-7203>'
+      const app = createVaporSSRApp({
+        setup() {
+          return createPlainElement('my-element-7203', { foo: () => msg.value })
+        },
+      })
+      app.mount(container)
+      expect((container.firstChild as any).foo).toBe(msg.value)
+    })
   })
 })