Vue-loader: Nested functional components break SFC CSS scoping

[darkylmnx]

Version

14.2.2

Reproduction link

https://github.com/darkylmnx/Vue-Functional-Component-CSS-Scope-Bug

Steps to reproduce

When I have nested functional components, CSS scoping seems to bug

• Clone the repo (https://github.com/darkylmnx/Vue-Functional-Component-CSS-Scope-Bug)
• cd Vue-Functional-Component-CSS-Scope-Bug
• npm install or yarn install
• yarn serve

Navigate to the page and you'll see the bug

What is expected?

I'm expecting to see correct isolated styles

What is actually happening?

My styles are messed up

---

Ftm, I had to use only one level of functional components and this is really painful when dealing with static pages like : about pages and stuff because they only render UI and not any state so it's unfortunate not to take advantage of functional components. Even in a more dynamic case things like the following have messed up styles.

<!-- in a page -->
<UserCard user="..." />

<!-- in a user card -->
<div>
  <UserAvatar src="props.user.img" />
  .... more markup
</div>

<!-- this doesn't work correctly -->

[zephraph]

Related to #1136.

[backbone87]

i encountered the same problem, but the scope is of this bug is wider. styles dont even get correctly applied if you have a normal component with scoped styles and a functional component with scoped styles as the root element inside.

i tried to locate the problem, but could only get this far, that i think it isnt a problem of vue-loader. the emitted content from build looks fine and every component gets their scope ID passed correctly. styles are also injected correctly. the problem is that some data-v-{scopeId} attributes are missing.

the problem is maybe somewhere here: https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js#L320 where only the scopeId of the functional component is set and not that from parents.

I would recommend to reopen this issue in the vue repository.

[n4ks]

Now I am faced with a similar problem, if the parent component has scoped attribute, then when assigning scoped to the child component, almost all styles, background, fonts, sizes, indents, etc. break down. (not all, but most)
All ok
Parent

Child

After
Parent

Child

[maksnester]

If it's just an attribute applied to a functional component - is there a way to pass bind this id? For example we have a similar bug when class is lost when you use <template functional> in that case class can be added by accessing vue data.staticClass

<template functional>
  <div :class="['fn-class', data.staticClass || '']">

So now outside class will be correctly added. Maybe there is some similar prop where parent scoped id lives?

[vhoyer]

we have a similar bug

Not contributing much to de discussion, but the described behavior, as far as I can remenber, is not a bug, it is meant behavior, hence the presence of data.staticClass.

Thought, It would be great to at least have access to that data-v-hash like, data.scopeId or something