Nested functional components break SFC CSS scoping

darkylmnx commented 6 years ago

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 commented 6 years ago

Related to #1136.

backbone87 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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

vuejs / vue-loader