Child Component Classes

I am really puzzled how Vue compiles classes when receiving props from parent component.

The appearance in Chrome Dev Tools looks like what I want

image

However, the inspector shows the hierarchy as:

image

And what is displayed

image

I am expecting the color to be purple (from ccc-parent) but it is showing yellow which is from base-input class

And what priority do scoped and lang attributes have when calculating the final style? Sure seems to me that ccc-parent should be the “final” decider

Priority is decided by the browser, using the usual CSS specificity rules. It doesn’t take into account the order that the classes appear in the class attribute.

In your example all the rules seem to be using single class selectors. This gives them equal specificity, so priority is determined by the order they’re pulled in. That order can differ between dev and production builds, so you need to be very careful.

It’s difficult to give specific advice without seeing the relevant code. Some suggestions that might apply:

  1. Usually if one component extends another then Vue will build the CSS in the right order.
  2. You might be better off using props to tell the base-input what to do, so that all the CSS is part of that component, rather than applying styles from the outside. Using a class to apply styling from the outside can violate encapsulation.
  3. You can bump up specificity by repeating the class in the selector. e.g. .ccc-parent.ccc-parent.

The browser doesn’t know about the scoped attribute when it decides the priorities. That attribute will add an extra attribute to the CSS selectors during the build process, which will indirectly increase the specificity of those selectors.