认识

2023年05月10日

柏拉文

越努力，越幸运

一、认识

---

<style scoped> 它的CSS只会应用到当前组件的元素上.这类似于 Shadow DOM 中的样式封装。它带有一些注意事项，不过好处是不需要任何的 polyfill。它是通过 PostCSS 转换以下内容来实现的：

二、语法

---

2.1 普通选择器

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换为:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

2.2 深度选择器

处于 scoped 样式中的选择器如果想要做更深度的选择。也即：影响到子组件，可以使用 :deep() 这个伪类:

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

转换为:

.a[data-v-f3f3eg9] .b {
  /* ... */
}

2.3 插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标

<style scoped>
:slotted(div) {
  color: red;
}
</style>

2.4 全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现 (看下面的代码):

<style scoped>
:global(.red) {
  color: red;
}
</style>

2.5 混合使用局部与全局样式

你也可以在同一个组件中同时包含作用域样式和非作用域样式:

<style>
/* 全局样式 */
</style>

<style scoped>
/* 局部样式 */
</style>