# 分享一个\_scopeId的使用场景

{% embed url="https://v.douyin.com/r8yTjpf/" %}

{% embed url="https://www.bilibili.com/video/BV1ae4y1n7KA/" %}

给大家分享一个 scopeId 的应用场景哈

说实话之前我也没用过

那它是什么呢

其实就是vue用来隔离不同组件样式

那个唯一标识

那它有什么用呢

这是一个下拉框

我们现在啊

想动态设置里面的背景颜色

这个颜色值是动态的

所以呢不能用popper-class

只能像我们前两天那期视频一样

用动态的CSS变量

那么我们都知道

这个popper

曾默认他是被挂在到这个body里面

而且呢他没有这个唯一标识

所以解决这个问题呢

要么我们把它改成popper-append-to-body（改成false）

那要么呢用我们今天这种方法

就是用scopeId来解决

怎么解决呢

就是我们手动给它加这么一个唯一标识

首先呢我们通过这种方法

找到这个组件里边这个popper元素

找到这个元素之后呢

我们用setAttribute

把这个scopeId作为属性的名称

然后属性只是一个空的字符串就可以了

我们来试一下

看一下

大家看他就有这个标识了

他样式呢也就自然而然应用上了

那有同学说既然你找到了这个元素

直接给他设置样式颜色不就行了

我们来看一下这样会有什么问题啊

点style点backgroundColor

红色

大家看 这还有一个小三角

这个小三角啊

它是一个伪样式

大家看

我们用纯JS的话

很难动态去改变它背景颜色（口误：边框颜色）

所以啊我们可以使用这个

CSS变量的这种方式 大家看

用这种方式是可以指定的

我们再来试一下

然后 我们改个颜色

大家看！这就可以了
