fix(runtime-core: ensure customElements have set domprop listeners synchronously if possible.

[LinusBorg]

Problem

defineCustomElement reflects all props as element properties, but it does so only after the element has connected.

When Vue sets props on elements, it prefers to add them via element properties if if can find a matching property on the element.

But since defineCustomElement sets these property getter/setters only after the element has connected, they don't exist when Vue is looking for them during mount.

This means that we can't do this:

<my-el  :object-prop="{ some: 'object' }" />

because it will end up as an attribute containing [object Object].

We have to do use the .prop modifier:

<my-el  :object-prop.prop="{ some: 'object' }" />

...but not all web frameworks support such a feature.

Solution

This PR is a refactoring that ensures that the element property getter/setters are set synchronously in the constructor in order to solve this problem.

Limitations

This solution doesn't work for async cusotm elements, as we can only resolve the props after the component definition has been loaded asynchronously.

close: #2343

[netlify]

✔️ Deploy Preview for vuejs-coverage ready!

🔨 Explore the source changes: 6dff8a2

🔍 Inspect the deploy log: https://app.netlify.com/sites/vuejs-coverage/deploys/61f04cc942474a000785555c

😎 Browse the preview: https://deploy-preview-5328--vuejs-coverage.netlify.app

[netlify]

✔️ Deploy Preview for vue-next-template-explorer ready!

🔨 Explore the source changes: 6dff8a2

🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-next-template-explorer/deploys/61f04cc97c5dc700079c1481

😎 Browse the preview: https://deploy-preview-5328--vue-next-template-explorer.netlify.app

[netlify]

✔️ Deploy Preview for vue-sfc-playground ready!

🔨 Explore the source changes: 6dff8a2

🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-sfc-playground/deploys/61f04cc93b17010008fa3515

😎 Browse the preview: https://deploy-preview-5328--vue-sfc-playground.netlify.app

[LinusBorg]

Converted to draft so it doesn't get merged as of now. This should be merged after a lot of other smaller fixes have been added, at which point this PR here will require some adjustments for the expected merge conflicts.

[yyx990803]

Note: this fix mainly allows users to do <my-el :object-prop="{ some: 'object' }" /> inside a Vue app when consuming Vue-defined custom elements. It also helps when used in other frameworks that detect prop setting via property presence check (e.g. Preact). It does not fix such a case for 3rd party web components that do not define properties before connect, so technically related to #2343 but not a fix for it.