VueJS - Apply a specific CSS style inside a component - css

Question

I defined styles for my website.
I also include specific content, which is written with a WYSIWYG editor by the users.
This content should have a specific style, but not erase the style of the rest of the website.
I tried using but then no style is applied at all. is there any way to apply a specific style to this content?
<template>
<div id="content">
<div class="content" v-html="content"></div>
</div>
</template>
export default {
name:'content',
props: {
content: {
type: String,
default: '<div>Contenu à définir</div>'
}
}
}
<style scoped>
h1, h2, h3 {
color: #94c946;
margin:0;
font-family: 'Montserrat-ExtraBold';
vertical-align:baseline
button{
font-family: 'Montserrat-ExtraBold';
border-radius: 100px;
background-color: #94c946;
color: #1B1B1B;
}
</style>

Answer 1

The scoped styles in view only work for the elements that are present on the component on the template, but not for dynamic content.
I would recommend you to use some id cascade, for example declare an id for your section like this:
<style>
#content button { .... }
#content h1, #myEditor h2 {....}
</style>
This can be accomplish better using some css preprocessor like sass
<style lang="sass">
#content
button
....
h1, h2, h3
....
</style>