从上面的结果可以看出来，在父组件 App.vue 中的样式：
.btn span {
color: green;
font-weight: bold;
border: 1px solid green;
padding: 10px;
}
上面这段样式并没有编译出来，运用到子组件 Button.vue 中的 span 中。
在 scoped 样式中，这种情况可以使用 >>> 连接符或者 /deep/ 来解决：
<!-- App.vue -->
<style scoped>
.btn >>> span {
color: green;
font-weight: bold;
border: 1px solid green;
padding: 10px;
}
</style>
此时虽然依旧是在 App.vue 中 scoped 控制 Button.vue 组件中 span ，但上面不同的是，这次样式生效。编译出来的结果如下：
另外使用作用域样式还存在一个问题。那就是对 v-html 中内在的标签样式不生效。比如下面这个示例：
<!-- Button.vue -->
<template>
<button class="btn">
<slot></slot>
</button>
</template>
<style scoped>
.btn {
color: red;
}
</style>
<!-- App.vue -->
<template>
<div id="app">
<Button class="btn-lg" v-html="vhtml"></Button>
</div>
</template>
<script>
import Button from "./components/Button";
export default {
name: "App",
data () {
return {
vhtml: 'Click <strong>7</strong>'
}
},
components: {
Button
}
};
</script>
<style scoped>
strong {
color: green;
border: 1px solid green;
padding: 10px;
}
</style>
编译出来的结果如下：
从上图可以看出来， v-html 中的 strong 标签样式并未生效。和前面在父组件的 scoped 中设置子组件内部标签未生效一样。当然，其解决方案也是同样的， 使用 >>> 连接符或 /deep/ 可以让 v-html 中的标签样式生效。比如上面的示例，可以将代码修改为：