Cannot bind external web-component's 'value' property as an object

[lmartorella]

Version

2.6.10

Reproduction link

https://embed.plnkr.co/2KKE9ixZJLrRB6FUNIou/

Steps to reproduce

Steps to reproduce (see the attached plunkr):

1. Create a web-component (not using Vue).
2. Expose a 'value' property in this web component that accepts/returns non-string objects (e.g. a Date object).
3. Instantiate the web component in Vue and bind the property using :value.prop syntax

What is expected?

The object is passed as is.

What is actually happening?

The object is converted to string before being set to the web-component 's property.

---

It is more and more common to include third party components written in other frameworks and directly use it in Vue.
However, it seems that the Vue code always expect the 'value' property to be of type string. Let's suppose to import a date selector as ES5 web custom component, that defines the 'value' property to be a Date object.
Vue will always pass this value as string instead. Using a different property name works as expected.

[posva]

We do handle the value differently, we cast it as a string. I'm not sure if we should avoid this in all ignoredElements or only on registered components but I don't know if periodically checking has a perf impact.

Internally we also set the element's _value to the original value, so it's funny but the way to workaround the problem is by not calling this._value = v in your code because it's already done by Vue

[sidharthramesh]

Any updates on this?