css如何与dom通过js变量通信？

目标：在dom中设置变量，然后css文件直接获取

.vue文件/html文件

<div style="--bgColor: red">
    <p>测试p背景颜色</p>
</div>

笔记：如果有多个变量的话，可以用分号隔开例如style="--bgColor: red; --bgColor2: red"

.css文件

div p {
    width: 100px;
    height: 100px;
    backgroud: var(--bgColor, #1989FA)
}

笔记：var(参数一，参数二)

参数一：外部传进来的变量值

参数二：默认值