style 标签属性 scoped 的作用和原理

在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性，对于这个 scoped 属性的了解做一下介绍。

1、作用

当 style 标签里面有 scoped 属性时，它的css只作用于当前组件中的元素。在单页面项目中可以使组件之间互不污染，实现模块化。

2、原理

通过使用postCss来实现转换，给dom增加一个动态属性，然后css属性也额外添加对应的属性来选择该dom，达到该样式只作用于含有该属性的dom，实现组件样式的模块化。

转换前：

<templete><div class='test'>hillo!</div>
</templete>
<style scoped>.test{color:red;}
</style>

转换后：

<templete><div class='test' data-v-4f795181>hillo!</div>
</templete>
<style scoped>.test[data-v-4f795181]{color:red;}
</style>

转换后的代码可以通过浏览器的控制台检查元素来查看。

3、如何修改有 scoped 属性的样式

我们的项目经常使用第三方组件库，例如 ElementUI；它的样式都用到了 scoped 属性。如果我们需要改变部分页面 ElementUI 的样式我们需要穿透 scoped，一般使用深度选择器 /deep/ 或者 ‘>>>’ 来穿透属性。

修改第三方插件样式：

<style scoped>.test /deep/ .el-menu-item { color:red; }
</style>
//或者
<style scoped>.test >>> .el-menu-item { color:red; }
</style>

如果 /deep/ 报错或者不生效，使用 ::v-deep

style 标签属性 scoped 的作用和原理相关推荐

.vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景问题由 ...
vue 样式标签使用 scoped
在开发时,为了防止组件css样式被污染在样式标签加上scoped就可以实现其原理是通过PostCSS进行转译实现的我们细心一点不难发现: 在没有加scoped之前我们在浏览器查看代码结构: ht ...
vue中style scoped属性的作用和原理以及scoped穿透
一.为什么要给style 节点加 scoped 属性(vue) 1.作用:当style标签里面有scoped属性时,它的css只作用于当前组建的元素.在单页面项目中可以使组件之间互不污染,实现模块化( ...
style标签上的scoped属性
vue中在vue文件中的style标签上有一个特殊的属性:scoped(布尔值): <style scoped> </style> 作用该属性的作用是将当前标签下的样式私有 ...
html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...
style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...
Vue style里面使用scoped属性并@import引入外部css, 作用域是全局的解决方案
本来只是想解决如题的问题的,但是其中涉及的一些点,有些模糊,所以补充补充~ 首先是有关@import的问题,一般的文件中,我们知道引用外部css,有两种方式: 1. HTML中使用link标签 < ...
HTML CSS的使用以及style标签和属性
CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式. CSS可以通过以下方式添加到HTML中: 内联样式:在HTML元素中使用"sytle"属性 ...
Vue中的style标签的lang=“ “和scpoed属性
Vue中的style 的lang=" "和scpoed属性普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lan ...

style 标签属性 scoped 的作用和原理

1、作用

2、原理

3、如何修改有 scoped 属性的样式

style 标签属性 scoped 的作用和原理相关推荐

最新文章

热门文章