<style> 上的 scoped 会使我无法修改子组件中的样式，但我又不得不使用它，希望可以改进。 #821
Description
What problem does this feature solve?
由于 scoped 是利用CSS3属性选择器的原理来控制作用域，而 .vue 组件中会给所有html元素标签加上一个统一的 data-* 的属性。在正常情况下没有问题。
但是当我在这个组件中引入了另一子组件的时候，子组件生成的html元素并没有被加上这样的属性作用域。
这就导致我没有办法去修补这个子组件中的样式。因为通常情况下子组件都是第三方开源库。
所以，我希望增加另一种 scoped 模式，是在编译后的CSS选择器上的属性选择器移动到“选择器的根选择器上”，而不是现在的“尾选择器”，这样在限定组件的样式作用域的同时，仍然可以使样式作用于该组件中的任何元素上，同时也不需要为每一个html元素都添加data-*，只需要在组件内最顶层html元素上添加就可以了。
说起来有点绕，看Example如下：
What does the proposed API look like?
编译前
子组件
<template>
<div class="title">我是header</div>
</template>父组件
<template>
<div class="header">
<v-title></v-title>
</div>
</template>
<style scoped>
.header {
background-color: #ff0;
}
.header .title {
color: #fff;
}
</style>编译后
现在是
<div data-v-9f807410 class="header">
<div class="title">我是header</div>
</div>.header[data-v-9f807410] {
background-color: #ff0;
}
.header .title[data-v-9f807410] {
color: #fff;
}这对子组件中的.title完全不起作用
我理想中是
.header[data-v-9f807410] {
background-color: #ff0;
}
.header[data-v-9f807410] .title {
color: #fff;
}既可以修改.title的样式，又可以控制作用域