Nested functional components break SFC CSS scoping

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 -->

[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.

[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?