search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
597 stars 176 forks source link

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

Closed OlkaB closed 2 months ago

OlkaB commented 2 months ago

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 2 months ago

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: https://github.com/vuejs/core/issues/9039#issuecomment-1697561827)