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. 😃

--

--