前言
我们在用 vue 开发项目时,在给当前组件中的元素设置样式,为了不污染全局样式,一般会在当前组件的 <style>
标签中增加 scoped 属性,表明 CSS 只作用于当前组件中的元素。
实现原理
按 vue 官方解释,scoped 是通过使用 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>
分析后可知,PostCSS 处理组件 scoped 样式时,给 HTML 的 DOM 节点加一个不重复属性 data-v-f3f3eg9 标志唯一性。如果组件内部还有组件,只会给当前的组件增加类似属性,不影响组件内部引用的组件。
深度作用选择器
在使用 scoped 属性后,达到了样式的组件隔离作用,但是如果引用它的父组件,想修改/增加其样式时,只能通过深度作用选择器来实现。
>>> 操作符:
<style scoped>
.a >>> .b { /* ... */ }
</style>
有些像 less、sass 之类的 css 预处理语言,无法正确解析 >>>。我们可以使用 /deep/ 操作符取而代之。
/deep/ 操作符:
<style lang="scss" scoped>
.a {
/deep/ .b {
/* ... */
}
}
</style>
结束语
深度作用选择器实际上违反了 scoped 属性的意义,且过多使用 scoped 会导致页面打包文件体积增大。实际开发中我们应该尽量避免或少使用。可以采用加 class 名称前缀的方式避免样式污染,如:ivu-row-flex-middle。
版权属于:瞭月
本文链接:https://www.lervor.com/archives/114/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。
2 条评论
666,前端大佬,带带小弟。