Subscribe on changes!

Default prop value is not reflected in custom element property

avatar
Aug 18th 2023

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).

avatar
Aug 19th 2023

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

avatar
Aug 19th 2023

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