Conflict between grandparent attribute and grandchild property

[cokuna-pavelkosolapov]

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.

[EmmyMay]

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'"

[EmmyMay]

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

[cokuna-pavelkosolapov]

@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.

[EmmyMay]

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.

[woai3c]

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.

[cokuna-pavelkosolapov]

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

[loilo]

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.

[MetRonnie]

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

[edison1105]

closing as duplicate of #6325 and #9039
#8976 will fix this