Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9kj1PwzAQhv/K4cVFamNFZYrSSoiFsRIDi5fQOG1K/CH7UoSi/HfOSSgpqrrdl++9e84de3YuObeKZSwPe187hKCwdVtpau2sR3ix2kHlrQaeiOjEcn5Jd+BVBf1UMaak2VsTEHQ4wCbmF/xVNY2Fd+ub8oE/SpOLUY10yEGlXVOgIg8gHxSzYiPZ+mkt2RCk8DHddt3Qs+9zQd4Ur41rEc4rbUvV0COqmB7lw7xk5uKiwJZsnHylC5ecgjW0eher5ZQIkmUwRGKMNoq+ZEdEFzIhQrWPBE4hsf4gyEp8a7DWKlFBrz68/QrKU2PJYotemp4kf7ndx5xecU4n0DNUc1ASB1DpSIpHe1d4ZZD/IQuNRRAzFhHaDIY002yD1o3hxjs6b12gS5aqqo3aRW8xIsOCUAF+O5XBG/raHJaxqmgbzIDbT04/AwjB9cX/rVHW5xsDx4v7ix11uqInnHGV8cX8qv0P8x3ulg==

Steps to reproduce

It can be seen right after launch.

What is expected?

1. Attribute state should be set on the div as an HTML-Attribute with value 343
2. Property state should be shown in the content as a "CompParent" value.
3. Besides it shouldn't throw a warning about type mismatch.

What is actually happening?

1. attribute a="343" is missing
2. Content: a: 343
3. Warning: Invalid prop: type check failed for prop "a". Expected String with value "343", got Number with value 343. at <Comp1a=343> at <Compa=343> at <Repl>

System Info

No response

Any additional comments?

The attributes from a component will be inherited by every nested child of the root level down to the deepest HTML-Element where the attribute could be set. But if the deepest child has a property with the same name, it causes a conflict, and somehow the grandparent attribute has a bigger priority than the property set by the direct parent.

P.S.: vue 2 does not have this problem.

Hello, you are getting this prop error because :a="343" is a number not a string. To make it a string, that would be :a="'343'"

Are you claiming there should be a change in how vue works or something? Because it makes sense that the grandparent value takes precedence because that is what is RENDERED on screen. I can't seem to find what is wrong with this code apart from the prop error

@EmmyMay type mismatch is not the problem! The point is that the grandparent attribute overrides the property set by the direct parent! In my opinion this is a wrong behaviour, the direct property should have more weight. I spent a lot of time to find this out by removing my code line by line...

Are you claiming there should be a change in how vue works or something?

why does an attribute from an unknown higher level affect a property of some non-direct child? It shouldn't happen.

honestly, i can't understand why some things got completely different behaviours as vue 2 had. It caused a lot of non-obvious bugs by migration to vue 3, and will bring much more i'm sure.

Maybe someone at the core team can help you, but other than the fact that it should work the way it used to, I actually feel like the grandparent should take precedence. But I understand your frustration since it wasn't like this.

see Fallthrough Attributes, the :a="343" is fallthrough. you can add the following code:

const props = defineProps({
  a: { type: String, default: 'ok' }  
})

in Comp.vue to fix this problem.

Yes, I could capture all undesirable attribute in that way. But still, I think this behaviour is not correct.

I'd like to second this. While I feel that fallthrough attributes shouldn't override properties explicitly set in descendants, I also understand that changing this would of course break BC.

However, this behavior creates problems that are really hard to debug, so it would be great to see something like a console warning during dev mode in these kinds of conflicting cases.

I don't usually add +1 type comments, but I cannot stress enough how difficult it was to debug a problem this behaviour caused, in switching from Vue 2 to 3.

I ended up using inheritAttrs: false - https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance