search

vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.99k stars 915 forks source link

Scoped styles get applied to elements inside root child node #1670

Open a-kriya opened 4 years ago

a-kriya commented 4 years ago

Version

15.9.1

Reproduction link

https://codesandbox.io/s/focused-liskov-bccuo?file=/src/App.vue

Steps to reproduce

In the linked sandbox, two SVG icons (written as Vue components) are displayed next to each other, one larger than the other.

The larger icon is a functional Vue component, and is picking up the styles that are defined in the parent, App, component inside a scoped style block (without any deep selectors).

What is expected?

To not have the scoped CSS rule defined in App component applied to the elements inside the WebIconFunctional functional component.

What is actually happening?

All elements inside the functional component have the data-v-* attribute of the parent component, allowing them to pick up scoped styles of the parent.

Searching for "scoped functional" in the repo yields several open issues, but none of them report this bug. All of them have been inactive for at least a year, so if this group of issues isn't a priority, please mention so.

LinusBorg commented 4 years ago

This is documented behaviour and by design:

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

a-kriya commented 4 years ago

@LinusBorg Yes, I'm aware of that behavior and that is not the issue here. I urge you to give the reproduction link another look and notice that svg element that is selected in styles in the parent component is not the root element of the child component.

a-kriya commented 4 years ago

So, only the root child node, the selected span element, is expected to have the data-v-* attribute (from scoped styles of parent), but all of the child components descendants have it:

LinusBorg commented 4 years ago

Oh, misread a bit, sorry about that.

Not too sure wether this is expected behaviour or not, I rarely use functional components and even less so when styling is involved.

So don't take this as a "bug" rating yet

a-kriya commented 4 years ago

Okay, thanks for reconsidering.

I'd just like to point out that the docs at https://vue-loader.vuejs.org/guide/functional.html say (bold mine):

Functional components defined as a Single-File Component in a *.vue file also receives proper template compilation, Scoped CSS and hot-reloading support.

So, "proper scoped css" support for Functional components is intended by vue-loader.