carbon-design-system/carbon-components-vue

Component's classess issues due to inheritAttrs=false implementation differences in Vue3 vs Vue2

OlkaB opened this issue · 1 comments

OlkaB commented

Due to differences of implementation of "inheritAttrs=false" between
Vue2 [https://v2.vuejs.org/v2/guide/components-props#Disabling-Attribute-Inheritance]
image

and Vue3
image

classes added to components that uses this declaration are not rendered on the component's root DOM node, which is a big trouble maker during migration to Vue3 as well as prevents from specific targeting of those components (forcing us to either wrapping them in additional DOM nodes or using some complicated mixes of nodes selectors (not advised as a good styling practice)
image

The solution could be to add 'style' and 'class' as props to all components that are using this declaration (please see below prnt-scrn)
image

@davidnixon What would be your thoughts on this one? Could I add such change?

OlkaB commented

I found a solution that can be applied: use .attr modifier on a class, like so

closing and leaving for anyone who could stuck on this one too
(solution found here: vuejs/core#9039 (comment))