Using scoped style with v-html

No, you can’t.

The scoped style won’t be applied even if we have written it inside of the component that uses v-html.

The reason is that the tags injected with v-html don’t have scope identifiers in their attributes and therefore the scoped style will have no effect on those tags.

<!-- let say we have a component like this -->
  <div class="container" v-html="htmlContent" />

  export default {
    data() {
      return {
        htmlContent: "<p>Tags that you want to style</p>",

<style scoped>
  .container p {
    color: cornflowerblue;

<!-- when we render those component, the html tags will be generated like this -->
<div class="container" data-v-r4nd0m1d>
  <p>Tags that you want to style</p>

<!-- and the generated style will look like this -->
  .container p[data-v-r4nd0m1d] {
    color: cornflowerblue;