딥셀렉터 v-deep

vue 프로젝트 진행 시 다양한 프레임워크나 컴포넌트를 사양하게 됩니다.

자식 컴포넌트에 원하는 css 를 적용하고 싶은데 그게 안될때 딥셀렉터를 사용합니다.

 

!! 자식 컴포넌트의 css에 쉽게 접근되지 않는 이유

웹컴포넌트의 스타일 캡슐화 때문!!

현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 적용되지 않도록 하기 위한 특성때문이라고 생각하면 됨.

 

scoped를 유지하면서 자식 컴포넌트에 css 적용하기

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

위의 세가지 방법으로 적용하면 모두 동일하게 아래와 같이 컴파일 되면서 자식 컴포넌트까지 접근이 가능하게 됨.

.a[data-v-f3f3eg9] .b {/*...*/}

단, 첫번째와 두번째 방법은 css에서는 문제가 없으나 scss, sass, less 같은 전처리기에서는 잘 인식되지 않는 경우가 있으므로 세번째 방법을 사용하는 것을 추천함.