/deep/ selector

[adrianoresende]

Very good the guide.

I would like to know your opinions about /deep/ selector.

It turns out that the father needs a change in the child only in the visual. I do not know if this violates FIRST.

This feature is implemented in 12.2.0 (vue-loader) May 2017
Issue: vuejs/vue-loader#661

I like this feature because it avoids increasing the code in the child components.
For example, create a props in the child just to increase the space (margin/padding) in style inline and then one more props to change other styles. It does not sound good to me.

/deep/ selector example:

<template>
    <icon name="phone" />
</template>

<style scoped>
    .link:hover /deep/ .icon svg {
        fill: white;
    }
</style>

[Elfayer]

I already encountered this issue, I think. Tell me if we are talking about the same thing.

You use scoped attribute on the <style> of a child. Then you want to override it on the parent, but you can't. Because Vue is going to generate a random attribute looking like data-v-9922c9c, and you cannot guess on the parent what it is going to be. So you're stuck. The child style can't be collapsing any other component style (as scoped is supposed to do) but in the end you can't override its style. Super annoying for reusable components across different project for example.

I personally, from this point, decided not to use scoped attribute anywhere. So /deep/ is fixing this issue, right?
I believe /deep/ is mandatory in the use of scoped attribute. But actually I don't know when and why I should use scoped in the first place. So I'd say /deep/ is an aberration as much as scoped is. I think using a goo class name at the root of each component and make it as root of your component style is sufficient. Or could you explain to me why I should use scoped?

Summary:

• I think scoped is useless.
• So /deep/ is too.
• I personally just use a good root class naming for each of my components and scope the style by it. So, no collision possible. Or is there any other use of scoped I'm missing?

[pablohpsilva]

Hello @adrianoresende
I've never have really used both scoped nor /deep/ to be honest with you. I know what they can do but, just like @Elfayer , the way I arrange classes and take care of making namespaces with them I never really needed to use those.

Please be free to call friends to post their opinion on this topic. If they really like it, let's write a style guide. :D

[adrianoresende]

The only reason I used scope is to avoid side effects.

Everyone has already had side effect with CSS in maintenance or improvement, so CSS enclosed inside component makes it safer.

I'm interested to know the best way to apply style safely and less complexity (less side effect)

[Elfayer]

@adrianoresende You would agree that all the components of an application should have a different name? Well I personally add the name of the component as class root, so no risk of any collision. If there is a collision, you used a class of the name of another component.

Example:
File name: TaskBoard.vue would look like:

<template>
  <div class="task-board">
    <!-- ... -->
  </div>
</template>
<script></script>
<style>
.task-board {
  // ...
}
</style>

Or UsersList.vue would look like:

<template>
  <div class="users-list">
    <!-- ... -->
  </div>
</template>
<script></script>
<style>
.users-list {
  // ...
}
</style>

That's how I work.

[victor-am]

@Elfayer this approach has a downside. If you do something like below:

<template>
  <div class="table-component">

    <h1 class="title">My awesome table</h1>

    <row-component></row-component>

  </div>
</template>

<style>
  .table-component .title {
    font-weight: bold;
  }
</style>

If the row-component contains any element with a class named title, it will be affected by the font-weight: bold rule, because the style is allowed to leak from it's original component.

As I see it, not using scoped can lead to either unmaintenable CSS or styles that are much more verboose (to avoid clashing namespaces).

[victor-am]

But back to the main topic, overall what do you folks think of using /deep/ navigation on Vue.js scoped CSS? 🤔

Using it you are coupling the style from the children to the parent, but on the other side it reduces some complexity on some cases 🤔

I feel like if you don't overuse it, /deep/ can be a helpful feature, but it's hard to define what is overusing 😆

[adjenks]

<style scoped deep>
.child{

}
</style>