Invalid nullish value handling in `patchDOMProp` for custom elements.

[filimon-danopoulos-stratsys]

Version

3.5.25

Reproduction link

jsfiddle.net

Steps to reproduce

1. Note the empty state "Nothing Selected"
2. Click the "Set value to 1" button
3. Click the "Set value to null" button

What is expected?

The value passed to the custom element should be null and "Nothing Selected" is rendered.

What is actually happening?

The value is converted to 0 before passing it to custom element and "First Selected" is rendered.

---

We (me and @per-toyra-stratsys) stumbled upon this potential issue when building manual Vue wrappers for a web component list box. undefined is used to represent that nothing is selected and is a valid value to pass to the web component. The offending code is probably https://github.com/vuejs/core/blob/v3.5.25/packages/runtime-dom/src/modules/props.ts#L58-L71.

The issue is broader than the reproduction shows. Other notable issues when prop changes type:

• When a prop changes from true to '' the value is changed to true so nothing happens.
• When a prop is changed from 'a' to null the value is changed to ''.

null and undefined both trigger the same condition so null is used for clarity in the reproduction.

We can work around the issue by manually setting the property of the web component in a onBeforeUpdate hook so that the check here https://github.com/vuejs/core/blob/v3.5.25/packages/runtime-dom/src/modules/props.ts#L59 returns undefined.

[edison1105]

It seems the only solution is to preserve nullish values for custom elements, but that would be a breaking change

[filimon-danopoulos-stratsys]

Thanks for the reply @edison1105 Would a possible non-breaking solution be to mark the value as "verbatim" somehow? If I can simply tell Vue to skip that check all is good. In the bare bones case of the repro, something like the following would suffice

 h('my-element', { value: verbatim(this.value) })

This is also enough to solve my issue since I don't use SFC but manually write the components in .ts files.
Syntactic sugar for this is also straight forward.

<my-element :value.verbatim="this.value" />

Implementation wise verbatim() at it's simplest form simply does

function verbatim(value: any) {
  return {
     '$vue-verbatim': true, 
     value
  }
}

Vue only needs to be able to unpack that value type here https://github.com/vuejs/core/blob/v3.5.25/packages/runtime-dom/src/modules/props.ts#L99

el[key] = value?.['$vue-verbatim'] ? value.value : value

I am not familiar with Vue internals so they suggestion might not be feasible at all but I think that there are ways to add this functionality without introducing a breaking change.