[Vue.js] Vue.js에서의 deep selector 그리고 작성법

deep selector이란?

---

  간단하게 말하자면, Vue.js에서 scoped가 있는 style을 작성하고 있을 때에 그 컴포넌트의 자식 컴포넌트에도 style을 추가하고 싶을 때 사용하는 css의 셀렉터의 작성법을 일컫는다. 

  Vue.js의 scoped CSS의 원리에 대해서 짤막하게 설명하면, scoped CSS를 이용하면 컴포넌트마다 data-v-[hash]가 할당되어 있고 그 속성과 세트가 되는 스타일이 적용되게 된다. 이로 인해 그 속성은 컴포넌트마다 다른 것이 적용되므로, 컴포넌트 단위로 스타일을 할당할 수 있다는 것이다.

 그러나 추가로 부모 컴포넌트에서 자식 컴포넌트에 다른 style을 추가 혹은 적용하고 싶을 때 사용할 수 있는 것이 deep selector이다.

 

 

deep selector의 작성법

---

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

<style lang="scss" scoped>
.a /deep/ .b { /* ... */ }
</style>

총 세 가지가 있는 것 같다. 첫 번째가 >>> 이며 >>> 대신에  /deep/ 으로 작성할 수 있다. 그리고 또 하나가 v-deep이다.

 v-deep은 다음과 같이 작성한다.

<style lang="scss" scoped>
.a ::v-deep .b { /* ... */ }
</style>

 

 

deep selector 간단한 사용 예

---

 outer.vue가 부모, inner.vue가 자식 컴포넌트로 정의했다.

// outer.vue

<template>
    <div class="outer">
        <p class="outer-text">Outer Text</p>
        <Inner />
    </div>
</template>

<style lang="scss" scoped>
.outer-text {
    color: red;
}

.inner-text {
    color: blue;
}
</style>

// inner.vue

<template>
    <div class="inner">
        <p class="inner-text">Inner Text</p>
    </div>
</template>

<style lang="scss" scoped>
.inner-text {
    color: green;
}
</style>

 outer.vue에서 inner 컴포넌트 글씨색을 .inner-text { color: blue; }를 적용했음에도 inter.vue에서 기본적으로 적용했던 초록색으로 표시되게 된다. 

 물론 직접 inner.vue에서 바꾸면 되지만 번거롭거나 상황에 따라 그 방법을 적용할 수 없을 수가 있다. 이 경우에는 deep selector을 사용하여 부모 컴포넌트인 outer.vue에서 색상을 지정할 수 있다.

// outer.vue（중략）

// 셋 중에 좋아하는 것으로 하나 선택해서 작성하면 된다.
/deep/ .inner-text {
    color: blue;
}

>>> .inner-text {
    color: blue;
}

::v-deep .inner-text  {
  color: blue;
 }

---

참고자료

https://shigurezuki.jp/articles/vue-deep-selector/

https://blog.mahoroi.com/posts/2019/03/scoped-css-v-deep/

https://qiita.com/wintyo/items/dfc232255ad45fdf376f#%E5%AF%BE%E7%AD%96