Open1
【Vue.js】deepセレクター
seiya2130deepセレクターは子コンポーネントのスタイルを設定できるセレクター
本来scoped属性が付与されたstyleタグ内のスタイルはそのコンポーネントのみに適用されるが、deepセレクターを使用すると子コンポーネントのスタイルまで調整することができる
Parent.vue
<template>
<div>
<Child />
</div>
</template>
<script setup lang="ts">
import Child from './Child.vue';
</script>
<style scoped>
/* 子コンポーネントのcolorクラスを使った場合の色は赤になる */
:deep(.color) {
color: red;
}
</style>
Child.vue
<template>
<div class="color">Hello World</div>
</template>
<style scoped>
.child {
color: blue;
}
</style>
- 画面
検証
参考