Self-Study/Vue
[Vue] 딥 셀렉터
Raadian
2022. 7. 4. 11:09
References
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
개요
딥 셀렉터(Deep Selector)는 부모 컴포넌트에서 자식 컴포넌트의 CSS로 접근하기 위한 방법이다.
딥 셀렉터의 사용 이유
Vue는 각 컴포넌트 간 스타일의 결합도를 줄이기 위해 **스타일 캡슐화(scpoed)**를 적용할 수 있다.
이는 현재 컴포넌트에만 적용이 되고 다른 컴포넌트에 적용하지 않게 한다.
<style>
/* 해당 class 선택자를 채택한 다른 컴포넌트에도 영향을 끼친다(global) */
.class-example1 {
color: blue;
}
</style>
<style scoped>
/* 해당 컴포넌트에서만 영향을 끼친다(local) */
.class-example2 {
color: red;
}
</style>
문제는 스타일 캡슐화가 적용되면 자식 컴포넌트에게도 영향이 미치지 않기 때문에
scoped를 유지하면서 이를 해결하기 위한 방법이 바로 딥 셀렉터이다.
딥 셀렉터 적용
딥 셀렉터를 적용하기 위한 방법은 크게 3가지가 있다.
/* .a : 부모 컴포넌트의 class 선택자, .b : 자식 컴포넌트의 class 선택자 */
<style scoped>
.a >>> .b {
...
}
</style>
<style scoped>
.a /deep/ .b {
...
}
</style>
<style scoped>
/* 해당 방법을 추천! */
.a::v-deep(.b) {
...
}
</style>