[VUE] Scoped 스타일에서 자식 요소 스타일링 : deep()

Vue에서 스타일 캡슐화(Scoped Styles)가 적용되면, 자식 컴포넌트나 특정 HTML 요소에 스타일을 적용하기 어려워진다.
:deep()을 사용하면 scoped 스타일이 자식 컴포넌트나 외부 라이브러리의 컴포넌트에도 영향을 줄 수 있다.

---

적용 예시

1. 부모 컴포넌트에서 scoped 스타일을 자식 컴포넌트에 적용

:deep()을 사용하여 부모 컴포넌트의 scoped 스타일을 자식 컴포넌트에도 적용할 수 있다.

<!-- 부모 컴포넌트 -->
<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<style scoped>
/* 부모 컴포넌트에서 자식의 .child-element 스타일을 변경 */
:deep(.child-element) {
  color: red;
}
</style>

<!-- 자식 컴포넌트 -->
<template>
  <div class="child-element">자식 컴포넌트의 텍스트입니다.</div>
</template>

<style scoped>
.child-element {
  font-size: 18px;
}
</style>

 

2. 라이브러리를 사용한 컴포넌트에 적용

Swiper, Vue-datepicker와 같은 외부 라이브러리의 컴포넌트에 scoped 스타일을 적용할 때도 :deep()을 사용하여 스타일을 캡슐화된 범위 내에서 적용할 수 있다.

<template>
  <swiper>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
  </swiper>
</template>

<style scoped>
/* Swiper 스타일 적용 */
:deep(.swiper-slide) {
  background-color: lightblue;
  color: white;
  font-size: 20px;
}
</style>

 

3. v-html, v-dompurify-html로 렌더링된 요소에도 스타일 적용

v-html이나 v-dompurify-html로 동적으로 렌더링된 HTML 요소에도 :deep()을 통해 scoped 스타일을 적용할 수 있다.

<template>
    <div class="content" v-dompurify-html="content"></div>
</template>

<style scoped>
/* v-dompurify-html로 렌더링된 요소의 스타일 적용 */
.content {
    :deep(table) {
      color: green;
      font-weight: bold;
    }
}
</style>

 

 

참고

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