Vue 3 scoped style affecting children by copying parent 'data-v-x' attribute

user_561341 0
Viewed 69

For some reason Vue3 will copy the scoped style unique attribute ('data-v') to the immediate child element of the child control.

This can be observed here:
https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbiAgICBpbXBvcnQgQ29tcDEgZnJvbSAnLi9Db21wMS52dWUnXG4gIGltcG9ydCBDb21wMiBmcm9tICcuL0NvbXAyLnZ1ZSdcbiAgaW1wb3J0IENvbXAzIGZyb20gJy4vQ29tcDMudnVlJ1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBzdHlsZT1cImJvcmRlcjogMXB4IHNvbGlkIHJlZDtcIj5cbiAgXHQ8Q29tcDEvPlxuICA8L2Rpdj5cbiAgPGRpdiAgc3R5bGU9XCJib3JkZXI6IDFweCBzb2xpZCBibHVlO1wiPlxuICBcdDxDb21wMi8+XG4gIDwvZGl2PlxuICA8ZGl2ICBzdHlsZT1cImJvcmRlcjogMXB4IHNvbGlkIGdyZWVuO1wiPlxuICBcdDxDb21wMy8+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNy9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM3L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkNvbXAxLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG4gIGltcG9ydCBDb21wMiBmcm9tICcuL0NvbXAyLnZ1ZSdcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxkaXYgY2xhc3M9XCJjb21wXCI+XG4gICAgQ29tcCAxXG4gICAgPENvbXAyLz5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgc2NvcGVkPlxuICAuY29tcCB7XG4gICAgY29sb3I6cmVkO1xuICB9XG48L3N0eWxlPiIsIkNvbXAyLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG4gICAgaW1wb3J0IENvbXAzIGZyb20gJy4vQ29tcDMudnVlJ1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImNvbXBcIj5cbiAgICBDb21wIDJcbiAgICA8Q29tcDMvPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBzY29wZWQ+XG4gIC5jb21wIHtcbiAgICBjb2xvcjogYmx1ZTtcbiAgfVxuPC9zdHlsZT4iLCJDb21wMy52dWUiOiI8c2NyaXB0IHNldHVwPlxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImNvbXBcIj5cbiAgICBDb21wIDNcbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgc2NvcGVkPlxuICAuY29tcCB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG48L3N0eWxlPiJ9

In the example I have 3 components (Comp1-3) which all have the scoped style and the same class name. You can observe that Comp1 css affects immediate child (Comp2) while the Comp2 affects immediate child (Comp3). If the components are outside of their affecting parent then its style is correct.

Is this a bug or expected behavior?

vuejs3 css
1 Answers

As Bravo's comment states the behavior is intentional. A way to avoid this is:

  1. Use BEM or some other syntax to avoid accidentally having the same class name
  2. Have two root elements (adding a Vue empty <Fragment/> should work as well). Note: with multiple roots Vue will no longer propagate any attributes (except props).
  3. I have not tried it but I assume disabling attribute inheritance will also do the trick (https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance).
user_5613410
Related