Vue-loader: Scoped styles inconsistent between functional and stateful components

[zephraph]

Version

13.7.0

Reproduction link

https://codesandbox.io/s/n4kv4mk1j4

Steps to reproduce

Inspect the markup of the buttons in the output panel. Pay close attention to how the v scoped style attributes are being applied in each case.

What is expected?

Regardless of whether a component is wrapped in a stateful scoped styles component or a functional scoped styles component, how attributes are applied should be the same.

What is actually happening?

1. When a component with scoped styles has a child component that is both stateful and has scoped styles, the wrapper element of the child component gets both the parent v attribute and the child v attribute. If the child element is functional with scoped styles, it only has it's own v attribute. (I would expect the functional child to also have its parent v-attribute.)

2. When a functional component with scoped styles has a functional child component without scoped styles the child component will only have the parent's v attribute on its root element. If the parent component is stateful then the v-attribute of the parent will apply to every element in the functional child component. (I'm not sure what's the correct behavior here. It would seem better if the attributes didn't flow all the way down the functional child w/ stateful parent)

There are other issues here, I'm just a bit too tired to list them all at the moment. The gist of the problem is if you decide to change a component from stateful to functional or vice versa you're probably going to have broken styles.

[webcoderkz]

2 years have passed and no solutions to this?

[Al-un]

FWIW, I encountered a similar issue with scoped styling. To add to the tests mentioned by OP, I tried various configuration with all components with scoped styling. ::v-deep selector is properly located for each test. I tried

• Child component inside the root element
  
  
  
  • Test done by OP so I did not dig further
  
  
• Child component as a root element
  
  
  
  • Main issue is when a stateful component uses a functional component as a root element
  
  

| Component | Root element | Status |
| ---------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
| Stateful | HTML tag | No problem (obviously) |
| Stateful | Functional component | Breaking point: Root functional component does not two data-* attribute so its style cannot be overridden |
| Stateful | Stateful | OK: root element has two data-* attributes |
| Functional | Functional (globally registered) | OK: root element has two data-* attributes |

I luckily ended up with a non-blocking situation but I have now to think twice, if not more, while designing some components