Apply style to v-html dynamic content — Vue3

When your website content renders on fly, how the styles will apply to that content.

<template>
  <h1 v-html="heading"></h1>
</template>
<script>
  export default {
    data () {
      return {heading: 'I am <span>Romik</span>.'}
    }
  }
</script>
<style scoped>
  h1 ::v-deep span {
    color: red;
  }
</style>

v-html

Directive is used to render dynamic content from component variables, methods etc….

<style scoped>

scoped use only when you want to apply for current component.

Using CSS / (::v-deep)

<style scoped>
  h1 ::v-deep span {
    color: red;
  }
</style>

Using SCSS / (::v-deep)

<style scoped lang="scss">
h1 {
  ::v-deep span {
    color: red;
  }
}
</style>

Using CSS / (>>>)

<style scoped>
h1 >>> span {
  color: red;
}
</style>

Using CSS / (:deep()) — latest

<style scoped>
h3 :deep(span){
  color: red;
}
</style>

Thanks. 😃