[Bug]: Checkbox not applying scoped styles about radix-vue HOT 5 OPEN

@epr3 I think we can do that. Since many component are doing the same, where visually hidden input were placed inside Primitive. However I would like this to be done in v2 instead of minor release. (I had a hunch it might cause some UI styling issue)

from radix-vue.

This is also happening with Switch component. If example code is used SwitchRoot is rendered as button without data-v-[id].

from radix-vue.

Thanks for the issue @dfagan2 ! I believe this is happening because in CheckboxRoot, we have multiple root node (additional input to cater for native form submission), thus the scoped data-attribute doesn't attached correctly to it.

Will look into this ASAP! 😁

from radix-vue.

@zernonia It looks like Vue 3 skips adding scoped styles on multi-root components, according to this issue here: vuejs/core#5446

Would it be beneficial to have the hidden input as a child of the root Primitive component (just below the <slot>)?

from radix-vue.

Yup. Some form components were having multiple root nodes thus causing scoped styles to not be applied correctly. It will be fixed in v2 😁

from radix-vue.