[vue] ::v-deep 언제 쓰는지 아는 사람?

[v-deep 공식 문서]

내가 이걸 찾게 된 경위..
1. v-html을 사용해서 데이터를 불러오는데 css가 안먹힘..
2. google "v-html css not working"
3. ::v-deep 을 써야 먹음
4. 해결 완..

CSS를 사용하면서 [css-selecter]를 사용해봤다면 그와 유사하게 사용 할 수 있다.

//v-html의 사용 
<template>
... 
    <div class="content" v-html="content">
          <!-- 에디터 영역 -->
	</div>
...
</template>
<script>
export default {
	data(){
    	return{
       		content:'<p>v-html 으로 뿌려지는 영역입니다. </p>',
    	}
    }
}
</script>
<style scoped lang="scss">
.content{
	p{
    	font-size: 14px;
        color:#888;
    }
}

</style>

<div class="content" v-html="content">
	<p>v-html 으로 뿌려지는 영역입니다. </p>
</div>

이 경우에는 화면에서는 div.content 내부의 p 가 있는 형태이지만, css는 적용 되지 않는다.

📌 적용이 안되는 이유 :
vue는 캡슐화로 처리하는데, css도 다른 컴포넌트에 간섭되지 않도록 scopred로 작성하게 됩니다. 이런 경우에는 해당 컴포넌트에만 css가 먹게 되는데 v-html으로 사용하게 된 경우 이미 컴파일 된 vue 화면과 데이터에 설정된 p 태그를 인식하지 못해서 그렇습니다.
v-deep을 사용하면 원하는 대로 css 설정 완료 !

v-deep은 주로 사용을 안해서 이론적으로만 알고 있었는데 이렇게 사용하게 되면서 집고 넘어가는게 좋을 것 같아 글을 기수합니다.