v-html을 사용해서 문자열 변수에 포함된 태그에 css 스타일을 적용하려고 했는데 정상적으로 스타일이 적용되지 않았다. 다음과 같은 옵션을 사용해서 해결할 수 있다.
예제
var html_str = "Hello <mark>Example</mark> World"
위와 같은 문자열 ‘Hello Example World’에서 Example만 <mark> 태그를 적용하고 별도의 스타일을 적용하려고 했다.
<template>
<div>
<p v-html="html_str"></p>
</div>
<template>
<style scoped>
p > mark {
background-color: red;
}
</style>
위와 같은 코드로 html_str을 전개했는데 실제로는 적용되지 않았다. 이 코드를 다음과 같이 수정해서 해결했다.
<template>
<div>
<p v-html="html_str"></p>
</div>
<template>
<style scoped>
p > ::v-deep mark {
background-color: red;
}
</style>
참고
- https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
