Support /deep/ selector

[yyx990803]

moved from vuejs/vue#4298

[indooorsman]

looking forward to this feature !

[jsikorski]

👍

[tonypee]

I've been encountering this issue. It would be great to have a solution, currently i just have to namespace everything, and not use scoped

currently scoped puts the scoping after the last element:

// output
<style>
  .parent .child[data-v-9922c9c] {
      color: blue
  }
</style>

It seems that a solution could be to use the :global modifier to move the scoping from the last element, further up the chain (to the root element of the child), but this seems to put the scoping in the incorrect place:

<style scoped>
  .parent {
     :global(.child) { color: blue }
  }
</style>

could become:

// output
<style>
  .parent[data-v-9922c9c] .child {
      color: blue
  }
</style>

unfortunately the current output is:

// output
<style>
  .parent [data-v-9922c9c].child { // notice the space after .parent
      color: blue
  }
</style>

[jsnick]

@yyx990803
I really want to solve this..
the style of a component can be changed by each parent components.
But I have no way to modify scoped child component style from scoped parent component because the scope of parent component is not applied to child component deeply!
(but of course, we have !important keyword..)

for example..

<!-- Child component and style-->
<div class="my-child-component">
  <h1 class="my-child-component__title">I'm Child Component</h1>
</div>

<style scoped>
.my-child-component__title {
  color: red;
}
</style>



<!-- Parent component and style -->
<div class="my-parent-component">
  <my-child-component></my-child-component>
</div>

<style scoped>
.my-parent-component {
  & > .my-child-component__title {
    color: blue;
  }
}
</style>

output of parent component

<div class="my-parent-component" data-v-parenthash>
  <div class="my-child-component" data-v-parenthash data-v-childhash>
    <h1 class="my-child-component__title" data-v-childhash>I'm Child Component</h1>
    <!-- only child-hash applied, not parent-hash -->
  </div>
</div>


<!-- parent style output -->
.my-parent-component .my-child-component__title[data-v-parenthash] {
    color: blue; /* this is not applied cause title component has no parenthash attribute */
}

So my team don't use scoped attributes in all components.
Just name all class with a component prefix like my-child-component , my-parent-component in above example.

[jordyvandomselaar]

For single styles I've been using variables in css: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables, it works like a charm. For multiple styles you could use: https://tabatkins.github.io/specs/css-apply-rule/, the Polymer framework uses both and has polyfills for them (browsers are starting to support both features, but not all do so as of now.). Maybe Vue-loader could include said polyfills?

[yyx990803]

This is now implemented in 12.2.0: https://github.com/vuejs/vue-loader/releases/tag/v12.2.0

[indooorsman]

awesome! 2017年5月27日 18:48，"Evan You" <notifications@github.com>写道：

…

This is now implemented in 12.2.0: https://github.com/vuejs/vue- loader/releases/tag/v12.2.0 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#661 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEsQbU5w4U_yx_jOnE6qjB1uJoFylqNRks5r9_-EgaJpZM4MGQLS> .

[lucasm-iRonin]

It looks great. Does it work for lang="scss" too?

[yyx990803]

@lucasm-iRonin yeah, but you need to use /deep/ instead of >>> because SASS cannot parse the latter