using .xx-xx underlined naming conventions when used by WebComponent will result is not reactive

[hcg1023]

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Enter the RFC, click the Random button, and components named with underlined lines will not be re-rendered, but camel names will work

What is expected?

The dash style also works

What is actually happening?

not works

[hcg1023]

I wish I could fix this, but I found several places to fix this, such as patchProp,patchDOMProp, or VueElement's _resolveDef method, and I need a good suggestion

[hcg1023]

@LinusBorg Actually, WHAT I mean is that I want to develop and fix this problem by myself. I think it is most appropriate to modify it in the method resolveDef. I wonder if you can assign this task to me?

[LinusBorg]

Hi @hcg1023

sure, you can work on this. I just assigned myself to remember to leave the suggestions you asked for.

I'm still thinking about this a bit in the context of not just custom elements but the assignment of element properties as a whole. Will get back to you shortly.

[hcg1023]

@LinusBorg Ok, looking forward to your reply, I will do this based on your reply

[hcg1023]

I saw this in the documentation and felt like it didn't work when it was precompiled

[hcg1023]

I saw this in the documentation and felt like it didn't work when it was precompiled

[yyx990803]

This is expected behavior. When you use .xx shorthand or the .prop modifier, the key will be used as-is without any modification. You are expressing the intention to set the prop as a DOM property with the exact key.

If you are using it in DOM templates, .camel modifier will be needed.