vue scss v-deep (scope 유지)

일반적으로 vue에서 style 에 scoped 속성을 사용한다.

*scoped : 해당 컴포넌트에만 style 적용.

 

scope 속성으로 style이 적용 된 경우, v-html로 작성된 태그에는 style이 적용 되지 않는데

v-deep을 사용하면 scoped 속성을 유지 하면서 v-html로 작성된 태그에 스타일 효과를 적용할 수 있다.

 

<template>
  <p v-html="computedText"></p>
</template>
<script>
  computed: {
    computedText(){
      return '<a>v-deep 적용</a>'
    }
  }
</script>

<style scoped lang="scss">
  p::v-deep{
    a{
      font-size: 14px;
      color: #e1e1eb;
    }
  }
</style>