Default prop value is not reflected in custom element property

[mgibas]

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-jpamc8

Steps to reproduce

Two issues with props inside elements defined with defineCustomElement:

• vue component respects default value configured with ie. defineProps but it's not reflected in host property value on creation
• setting value on custom element and removing it afterwards strips default value and returns null instead

What is expected?

• prop's defaults are reflected on a host element
• prop's defaults are used as a fallback in case value was removed on a host

What is actually happening?

• undefined is returned instead of prop's default
• null is returned instead of prop's default once ie. host's value attribute was set and then removed by a user

System Info

No response

Any additional comments?

This is troublesome with form inputs where inputs are expected to return empty string '' as no value and never returns null (they are actually always converted to '' so el.value = null results in value being an empty string).

[akash-melkeri]

Just rename the prop from one of the components.
In HelloWorld.vue rename hello to value
OR
In MyCustomElement.vue rename value to hello.

[mgibas]

Sorry, hello property was a leftover - I just removed it from the repro.

[haoqunjiang]

#9012 has fixed the second issue, i.e. prop's defaults are used as a fallback in case value was removed on a host.
But the first one (prop's defaults should be reflected on a host element) is still present.

[edison1105]

#9012 has fixed the second issue, i.e. prop's defaults are used as a fallback in case value was removed on a host. But the first one (prop's defaults should be reflected on a host element) is still present.

😄
I re-file a new PR to handling the remaining issues