[VueJS] Deep Selectors 사용하여 자식 컴포넌트의 스타일 정의하기

자식 컴포넌트 스타일 정의하기

VueJS 기반의 프로젝트를 진행하게 되면 스타일 캡슐화를 사용하여 각 컴포넌트별로 <style scoped> 형식으로 개발을 진행하고는 한다.

 

하지만 이러한 방식의 개발은 하위 요소임에도 불구하고 자식 컴포넌트 스타일을 제어할 수 없는 아이러니한 상황에 빠지게 된다. 특히 본인이 만든 컴포넌트면 상관이 없는데, 외부에서 가져온 컴포넌트일 경우 매우 난감하다.

이럴 때 사용하는 방식이 deep selectors를 사용하는 것이다.

 

하나 알아둬야 할 사항은 위에서 분명 자식 컴포넌트에 영향을 주지 못하는 상황이 발생한다라고 설명하였는데,

이는 자식요소의 root node는 예외이다.

즉, 쉽게 말하자면 첫 번째 자식은 적용이 되는 반면 첫 번째 자식 요소보다 더 깊은 곳에 위치한 자식 컴포넌트에는 영향을 줄 수 없다.

 

공식문서에서는 3가지 방법에 대해 안내해주고 있다.

<style scoped>
.a >>> .b { /* ... */ }
</style>

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

<style scoped>
.a::v-deep .b { /* ... */ }
</style>

어떤거를 사용해도 상관은 없지만 첫 번째 방식의 경우 Sass 같은 전처리기에서 인식이 안된다 한다.

그럼에도 ::v-deep 방식을 많은 사람들이 추천하는 모양이다.

 

하지만 ::v-deep 역시 Vue 3에서는 사용방법이 바뀌었으니 Vue버전을 변경한다면 주의해야 한다.

Vue3 버전에서는 v-deep을 다음과 같이 사용하라고 github 문서에 나와있다.

::v-deep(.bar) {}

 

스택오버플로우를 살펴보면 vue 2.7 이상에서는 위와 같은 방식을 사용해야 한다고 한다.

 

그리고 공식문서를 살펴보니까 아래와 같은 방식으로도 사용한다.

:deep(.bar) {}

실제로 Vue 3 환경에서 테스트를 해보니까 두 방식 전부 제대로 적용되는 것을 확인 하였다.

---

참고: https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css

Scoped CSS | Vue Loader

참고: https://stackoverflow.com/questions/63986278/vue-3-v-deep-usage-as-a-combinator-has-been-deprecated-use-v-deepinner-se

Vue 3 ::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead

참고: https://vuejs.org/api/sfc-css-features.html#deep-selectors

SFC CSS Features | Vue.js