Add CSS style to v-html

Question

I would like to add style to HTML code in a v-html . I tried several solutions but nothing functional:(

Here is my code:

Template:

<div
  class="para"
  v-html="value" 
/>

Script:

export default {
  data () {
    return {
      value : "<h2> TITLE </h2> <p> PARA </p>"
    }
  },
}

Style:

.para >>> h2 {
  color: blue;
}

.para >>> p {
  color: red;
}

Thanks in advance !

Answer 1

If you're using scoped style without SASS, use the >>> combinator this way:

>>> .para > h2 {
  color: blue;
}

>>> .para > p {
  color: red;
}

If you're using scoped style with SASS, use the ::v-deep combinator:

::v-deep .para > h2 {
  color: blue;
}

::v-deep .para > p {
  color: red;
}

Otherwise:

.para > h2 {
  color: blue;
}

.para > p {
  color: red;
}

Here is a demo