插槽选择器

当父组件通过子组件的插槽向子组件传递元素，而且子组件想设置父组件传入的元素的样式时，可以在 子组件 中使用插槽选择器:slotted()

子组件

<template>
  <div class="son">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.son {
  :slotted(.a) {
    color: red;
  }
}
</style>

父组件

<script setup lang="ts">
import Son from './components/Son.vue'
</script>

<template>
  <div>
    <Son>
      <div class="a">123</div>
    </Son>
  </div>
</template>

全局选择器

在组件中设置某个元素或者类的样式，使其全局可以使用

<style lang="scss" scoped>
// .g 是类名，可以传类名或者标签
:global(.g) {
    color: green;
}
</style>