Stencil: With Vue 3 not able to pass object as attribute anymore

[robaxelsen]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Web component renders "[object Object],[object Object]"instead of the stringified object[{"id":"id1","label":"Option 1"},{"id":"id2","label":"Option 2"}]`.

Expected behavior:

Should return stringified object [{"id":"id1","label":"Option 1"},{"id":"id2","label":"Option 2"}] instead of "[object Object],[object Object]". The line below is a "hand rolled" web component that does the same successfully. Difference is that the first one is made with Stencil.js.

Steps to reproduce:

1. Go to http://rob.ee/dev/stencil-vue-3-repro/ to see reproducer code live
2. See that first line which should render the object stringified, returns "[object Object],[object Object]" instead of stringified object

Related code:

Repo for reproducer: https://github.com/robaxelsen/stencil-vue-3-repro

Other information:

We have not been able to isolate whether this is a Stencil.js or Vue 3 issue, though it does work with Vue 2. The object.prop way of passing attributes has been deprecated in Vue 3, so we've been therefore not using it. Adding it in the repro code does not result in a successful render.

Posted already as bug issue in the Vue 3 repo.

[graynorton]

FWIW, it appears that when binding values into a custom element, Vue 3.0 attempts to bind to a property if possible and falls back to an attribute if not. For whatever reason, Vue's logic for determining whether there's a writable / settable property on a CE seems to be failing in the case of the Stencil-created CE in this example.

[claviska]

This seems like some kind of timing issue with Vue 3 + Stencil's lazy loader. Pasting a link to a comment from the Vue thread here, as it may help identify the problem.

https://github.com/vuejs/vue-next/issues/2343#issuecomment-706525135

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!