SFC scoped style improvements

[yyx990803]

We are aware that the current SFC scoped style implementation has a number of issues/limitations regarding the component root node and slotted content. I'd like to use this thread to collect feedback and help us improve the scoped style implementation.

What are the pain points when using <style scoped>? What features you hope <style scoped> could support? We have some ideas, but we'd like to hear from the users to get a clearer picture. If you have ideas or suggestions, please provide feedback here (and please be as specific as possible, with code samples and clear descriptions of your scenario).

[blake-newman]

The main issue we face is with multiple nested functional components, scoping doesn't seem to apply.

Removing that limitation itself removes tonnes of limitation

[parker-codes]

Scoped by default. It would not be backwards compatible unless there were a configuration flag. I think it is beneficial because I've never had a component that wasn't scoped. I put global styles in an actual CSS file at the top level.

[michaeldrotar]

This is interesting.. I've never used scoped and instead rely on BEM-like naming conventions to avoid collisions.. this affords me the flexibility for a parent component to tweak its children's styles with actual css rather than creating all kinds of attributes that provided limited customization.

I thought this was the intended usage given this note: Scoped styles do not eliminate the need for classes.
https://vue-loader.vuejs.org/guide/scoped-css.html#also-keep-in-mind

[nblackburn]

Scoped by default. It would not be backwards compatible unless there were a configuration flag.

There is an alternatives to scoped css (css modules, css in js etc...) so this cannot be a default option without conflicting against those alternatives.

[Wharley01]

Making SCSs the default, then generating a unique class per component to wrap around all classes in that component,

---

Advantage is,

A more cleaner html will be generated(html might not be touched)

This is actually the real scoping

The class generated for each component may follow a pattern which developer can manually target

[hollandThomas]

There are several CSS-in-JS libraries in the React ecosystem that offer a couple of nice features. styled-components, for example, lists compelling points in its motivation.

Especially, I always wondered whether Vue could provide something along those lines:

• Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.

Of course, you can bind styles to a computed property in Vue but having the computation and adaption of styles right inside of a styled-component always made more sense to me personally.

Instead of passing classes for styles, those components are in fact really _just components_™ and are accessed like any old component: by its name. That makes templates more readable IMO. Also, having a global theme (with colors, spacings et al.) at hands inside of such structures often comes in handy.

There are adapters for e.g. emotion but it would be really cool to have something like this "battery included" in Vue itself. I'm definitely not saying to replace the current way of doing things but instead to take a look into the ideas as I'm convinced they have a lot to offer.

[IlCallo]

Coming from an Angular background, a thing I really miss in Vue SFC is the :host selector.
95% of time I need to stile the root component, having to define a class every time is just annoying...

[logaretm]

A few things I have in mind:

• Ability to target root nodes with a custom selector, I believe angular is doing that.
• It could be worth making scoped styles are the default as it is extremely unlikely to have a component targeting styles for other components and should be discouraged as well, I have built quite a few apps over the past years and never I have not used scoped styles.
• If we can find a better alternative than the data-* selectors that would be great, maybe even make it predictable like a wrapper class name equal to the name of the component.

[hecktarzuli]

We should consider moving attribute selectors to simple class selectors
button.hash vs button[hash]

I haven't tested it, but I believe attribute selectors are some of the slowest around.

[nblackburn]

If we can find a better alternative than the data-* selectors that would be great.

We should consider moving attribute selectors to simple class names
button.hash vs button[hash]

@hecktarzuli, @logaretm @Wharley01 You can use CSS modules if you are like me and don't like data attributes polluting the DOM and exposing the underlying framework.

[logaretm]

@nblackburn I'm fine with them making my DOM ugly, also I wouldn't care about ppl finding out my framework of choice. I'm only concerned by the selector performance which @hecktarzuli has illustrated.

[4refael]

I never liked scope style my components because I usually needed to reuse some of the stylings in other places. Also, CSS is hard to maintain and have pieces of it in each component wasn't ideal for me.
I then started using utility-first css, and I longer feel like I need css in SFC anymore.

[Rolanddoda]

I don't know if its currently available or if it's doable but it would be great to reactively use CSS variables in the template.

<template>
   <div :class="background: '--chosen-bg'"></div>
</template>

[hecktarzuli]

💥 The main problem with Vue styles is it's hard to have reusable styles that are only loaded when they are needed.

It seems pretty darn hard to write style XYZ, and that's used by 5 components without shoving it somewhere global (which forces it to be loaded even when it's not needed)

@yyx990803 if you could find a way to make reusable styles that are required by components, but only loaded once, on-demand, that would be huge step forward.

[michaeldrotar]

I don't know if its currently available or if it's doable but it would be great to reactively use CSS variables in the template.

<template>
   <div :class="background: '--chosen-bg'"></div>
</template>

You can do things like this:

<div style="--some-color: blue"></div>

div {
  color: var(--some-color, 'red');
}

Replace style with a :style="myStyles" binding, make myStyles a computed to combine multiple attributes into css variables, and then good to go.

Personally I think it's alot easier to not used scoped css and just use normal css to target and change styles as needed -- but this is a flexible option for people that want it.

More info:

• https://www.telerik.com/blogs/passing-variables-to-css-on-a-vue-component
• https://vuedose.tips/tips/theming-using-custom-properties-in-vuejs-components