作用域CSS
当<style>
标记具有该scoped
属性时,其CSS将仅应用于当前组件的元素。这类似于Shadow DOM中的样式封装。它有一些警告,但不需要任何polyfill。通过使用PostCSS转换以下内容来实现:
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>
进入以下:
<style> .example[data-v-f3f3eg9] { color: red; } </style> <template> <div class="example" data-v-f3f3eg9>hi</div> </template>
#混合本地和全局样式
您可以在同一组件中包含范围和非范围样式:
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
#子组件根元素
使用时scoped
,父组件的样式不会泄漏到子组件中。但是,子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这是设计的,以便父级可以设置子根元素的样式以进行布局。
#深度选择器
如果您希望scoped
样式中的选择器“深入”,即影响子组件,则可以使用>>>
组合子:
<style scoped> .a >>> .b { /* ... */ } </style>
以上将编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
某些预处理器(如Sass)可能无法>>>
正确解析。在这些情况下,您可以使用组合/deep/
或::v-deep
组合 - 两者都是别名,>>>
并且工作完全相同。
#动态生成的内容
创建的DOM内容v-html
不受范围样式的影响,但您仍然可以使用深度选择器设置它们的样式。
-
范围样式不会消除类的需要。由于浏览器呈现各种CSS选择器的方式,
p { color: red }
在作用域时(即与属性选择器结合时)会慢很多倍。如果您使用类或ID,例如in.example { color: red }
,那么您几乎可以消除性能损失。这是一个游乐场,您可以自己测试差异。 -
在递归组件中注意后代选择器!对于带有选择器的CSS规则
.a .b
,如果匹配的元素.a
包含递归子组件,则.b
该子组件中的所有组件都将与规则匹配。
源:https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors