CSS variable binding is not intuitive, and the scope of common attributes and variable attributes in the same CSS class is inconsistent
Dec 4th 2023
Vue version
3.3.8
Link to minimal reproduction
Steps to reproduce
CSS variables bound in subcomponents have no effect at the parent level, but styles without scoped are valid except for variable binding fields
What is expected?
When scoped is not used, variables maintain the same influence range as other regular styles
What is actually happening?
The same type of named variable in the parent component is not effective now
System Info
No response
Any additional comments?
No response
Dec 4th 2023
This is how it's designed.
The actual value will be compiled into a hashed CSS custom property, so the CSS is still static. The custom property will be applied to the component's root element via inline styles and reactively updated if the source value changes.