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 7094a0f60af7f6e19df41d4616f08c6db6907d7a..8beb89edb9184ac5961642afe0ba2daf09365ee9 100644 (file)
--- 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)
+    })
   })
 })