[Vue] v-deep 셀렉터

nuxt 프로젝트 진행 중 v-deep Selector에 대해 처음 접하게 되어 명확히 파악하고자 정리하게 되었다.

---

1. Deep Selector란?

Deep Selector는 부모 컴포넌트에서 자식 컴포넌트의 CSS로 접근하기 위해 사용하는 Selector이다.

 

2. Deep Selector를 사용하는 이유

(1) scoped를 유지한 채 자식 컴포넌트 스타일 적용

우선 기본적으로 Vue는 각 컴포넌트 간 스타일 결합도를 줄이기 위해 스타일 캡슐화(scoped)를 적용할 수 있다.

이를 통해 우리는 현재 작업 중인 컴포넌트에만 스타일이 적용되게 하고 싶을 경우 scoped라는 설정을 통해 스타일의 적용 범위를 제한할 수 있다.

 

그러나 이로 인해 파생되는 문제는 스타일 캡슐화가 적용되면서 자식 컴포넌트에게도 영향이 미치지 않는다는 것이다.

scoped를 유지하면서 이를 해결하는 방법이 Deep Selectoer이다.

 

(2) Vuetify 스타일링

또한 Vue 프로젝트에서 Vuetify룰 사용할 경우, 번들러링된 라이브러리 소스 코드 수정을 용이하게 해준다.

 

(3) v-html 스타일링

v-html로 선언된 HTML 마크업은 scoped 스타일 적용이 안 된다.

그 이유는 v-html의 경우, 이미 컴파일된 Vue 화면과 데이터에 설정된 태그를 인식하지 못해 이러한 이슈가 생긴다.

 

이런 때에도 Deep Selector를 사용하면 스타일 적용이 가능해진다.

 

3. Deep Selector 사용 방법

Deep Selector 적용 방법에는 크게 3가지가 있다.

<style scoped>
	.parent-component-selector >>> .children-component-selector {
    	...
    }
</style>

<style scoped>
	.parent-component-selector /deep/ .children-component-selector {
    	...
    }
</style>

<style scoped>
	.parent-component-selector::v-deep(.children-component-selector) {
    	...
    }
</style>

 

---

 

[레퍼런스]

https://raadi.tistory.com/116

[Vue] 딥 셀렉터