Frontend/Vue
Vue Deep Selector
섕걍
2023. 4. 18. 11:44
vue를 이용할때 style에 범위를 제한하기 위해 scoped를 사용한다.
그러나 하위컴포넌트의 스타일을 제어할 수 없는 문제가 생기게 된다.
이럴때 deep Selector를 사용하게 된다.
(이때 첫번째 자식요소에는 적용이 되지만 그 이후의 자식컴포넌트에는 영향을 줄 수 없을때를 말한다.)
<style scoped>
.a >>> .b {
//style
}
</style>
<style scoped>
.a /deep/ .b {
//style
}
</style>
<style scoped>
.a ::v-deep .b {
//style
}
</style>
현재 기준 추천 방법
<style scoped>
::v-deep(.b){}
</style>
<style scoped>
.a :deep(.b){}
</style>