Add style to v-html with scoped css in Vue

In this post, we will learn how to add CSS style using deep selectors in v-html in Vue.

In Vue, when you apply scoped CSS to a component's DOM element, a unique attribute (eg data-v-f3r4fkdd) is added to it and then the css rules are appended to that attribute.

.parent-class .child-class { /* ... */ }

will be compiled into:

.parent-class .child-class[data-v-f3r4fkdd] { /* ... */ }

However, when you use the v-html directive in Vue, vue-loader does not assign any attribute to the component element in the v-html's markup. This makes the HTML markup out of the scope of the component. And that is why the v-html style does not work as usual.

So how can you add style to a v-html markup in a component?

The answer to this problem is by using the Deep selectors ( >>> or ::v-deep ). Using the Deep Selectors you can target a child element of a parent component with a unique attribute.

Let's check how to do it with an example.

Suppose you have a component with v-html directive and you want to change the color and font size of the paragraph text.

<div id="app" class="main-wrapper">
    <div v-html="content"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      content:
        "<h1>Heading</h1><p>Lorem Ipsum is simply dummy text.</p>",
    };
  },
};
</script>

Deep Selectors in Vue 2

So to change the color of the paragraph text, you can use >>> combinator or ::v-deep with sass

<style scoped>
.main-wrapper >>> p {
  color: red;
}
</style>

If you are using sass to style v-html then, you have to use ::v-deep syntax.

<style scoped>
.main-wrapper::v-deep p {
  color: red;
}
</style>

or you can also use /deep/ syntax. However, this syntax is now deprecated in Vue 2.7.

<style scoped>
.main-wrapper /deep/ p {
  color: red;
}
</style>

The above code will be compiled into:

.main-wrapper[data-v-f3f3egdr] p{color:red}

While using the deep selector syntax make sure that your component is scoped.

Using Deep Selectors in Vue 3

If you are using Vue 3, then you can use :deep selector.

.main-wrapper:deep(p){
    color: red;
}

The above syntax also works in Vue 2.7.

Note:

In Vue3, ::v-deep is deprecated, so you have to use :deep(:child-class) instead.

The >>> and /deep/ syntax is also deprecated in Vue 3.

Demo Code:

<a href="https://codesandbox.io/s/bold-wilbur-h02mwb?fontsize=14&hidenavigation=1&theme=dark"> <img alt="Edit h02mwb" src="https://codesandbox.io/static/img/play-codesandbox.svg"> </a>