scoped属性及样式穿透

scoped属性是前端开发中经常接触的一个样式属性。那么，我们应该怎么应用好这个属性，加快我们的工作进度呢？下面我会从以下几个方面来谈谈我工作中遇到的关于scope属性的问题。

一、应用场景

在vue项目中我们经常会使用组件库，组件库本身具有自己的style属性，但是组件库本身的style属性不一定是我们需要的。比如边距、颜色、大小等属性。一些重要的、通用的属性可以通过组件库给我们提供的指令来设置，但是，在更一般的情况下，组件库提供的指令不足以我们完成日常的开发工作，我们需要在组件上设置一些样式，此时我们就需要用到scoped属性以及样式穿透。

二、概念引入

1.属性选择器

如图，想要选中页面A中的第一个a标签，光有类名和标签名是不够的，还需要加上a标签自定义的[one]属性。

• 属性选择器选中第一个a

属性选择器相当于java中方法或类的签名，标识了唯一的标签或页面。

2.scoped属性是什么

scoped是“作用域”的意思。在我们的style标签中，除了要声明CSS属性的lang属性（SCSS、LESS等），还要声明scoped属性。

scoped作用于单页面应用，是为了形成各个页面之间的隔离。因此，单页面应用首次加载就会加载页面中所有的CSS文件。

如果不加scoped的情况。

以a标签为例：A、B页面同时有a标签。A页面中的a标签没有设置颜色，B中的a标签设置了颜色。如果先点开（加载）A页面，则A页面中的a标签也会被渲染成红色。

但是如果加上scoped。在声明a标签样式的B文件的style上设置scoped属性，我们会看到属于B页面的样式文件被加上了一个data-id属性。

由此可以总结scoped属性的作用：

形成各个页面之间样式的隔离。他的作用机制是vue内部为每个页面上的样式都加上了唯一的标识符（属性）。

[注意]

在某些情况下，形如

const routeA =()=>import("A.vue")

这种按需引入路由（路由懒加载）的情况可能不会复现上面的情况，是因为懒加载的过程中，每个页面都会单独的引入，不会首屏加载的时候就全部加载。

综上所述。在vue创建项目时，每个vue组件会以属性选择器的方式拼接上一个唯一的标识符，类似于data[v-ddddd]，形成页面之间的隔离。

3.scoped的副作用

我们要保证不能污染样式，因此必须有scoped,但是在特殊情况下，元素应该怎么选中呢？

例如，有一个div，里面有一个el-input，我们想通过选中div下的input框的形式来选中元素，常规情况我们会这么写：

但是页面上为我们的input拼接了属性id，因此我们的常规写法永远无法选中。

4.解决方式:样式穿透

v:deep比较常用,或者用 >>>
样式穿透加上的位置相当于占位符，vue帮我们把属性值拼接到占位符的位置。

问题完美解决。

三、特殊场景的解决措施

1.排查

有时候，页面抖动（先打开A页面，然后B页面的样式突然抖动一下）就是因为scoped属性惹的祸。要仔细检查有没有样式冲突，scoped是否声明。

2.特殊方法

还有就是在极其特殊的情况下，样式穿透也无法选中元素，我们此时可以在子页面最外层声明class属性，通过类的唯一名称隔离不同的文件（被特殊处理的css属性写在子页面中，另写一个style标签，不写scoped属性，只对本页面负责）

[

欢迎大家提出宝贵意见。

]