fix(custom-element): reflect prop default value

packages/runtime-core/src/component.ts

@@ -363,6 +363,12 @@ export interface ComponentInternalInstance {
    */
   ceReload?: (newStyles?: string[]) => void
 
+  /**
+   * custom element set prop
+   * @internal
+   */
+  ceSetProp?: (prop: string, value: any) => void
+
   // the rest are only for stateful components ---------------------------------
 
   // main proxy that serves as the public instance (`this`)

packages/runtime-core/src/componentProps.ts

@@ -480,6 +480,10 @@ function resolvePropValue(
       } else {
         value = defaultValue
       }
+
+      if (instance.isCE) {
+        instance.ceSetProp!(key, value)
+      }
     }
     // boolean casting
     if (opt[BooleanFlags.shouldCast]) {

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -39,6 +39,7 @@ describe('defineCustomElement', () => {
       expect(e).toBeInstanceOf(E)
       expect(e._instance).toBeTruthy()
       expect(e.shadowRoot!.innerHTML).toBe(`<div>hello</div>`)
+      expect(e.getAttribute('msg')).toBe(`hello`)
     })
 
     test('should work w/ manual instantiation', () => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -409,6 +409,10 @@ export class VueElement extends BaseClass {
             break
           }
         }
+
+        instance.ceSetProp = (key: string, value: any) => {
+          this._setProp(key, value, true, false)
+        }
       }
     }
     return vnode