Vue.js: Known issues with scoped styles and the v-html directive? - vue.js

Question

I'm just wondering if there is a known issue with scoped styles and the v-html directive? I seem to find that either applying the same styling to the parent or removing the scoped key work from styles everything seems to work ok...?
Example component with the issue (this works with the wordpress API if anyone with a Wordpress site want's to test with their setup):
<template>
<div v-bind:id="posts">
<div v-for="(post, i) in posts" v-bind:key="i">
<div v-html="post.content.rendered"></div>
</div>
</div>
</template>
<script>
export default {
name: "Posts",
props: {
msg: String
},
data() {
return {
posts: null
};
},
created() {
this.$http.get(this.$store.state.endpoint + "posts").then(response => {
this.posts = response.body;
});
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
p {
color: #42b983; // v-html in this example spits out numerous <p></p> tags...
}
</style>
*for replicating example, you can replace this.$store.state.endpoint with your Wordpress API endpoint, e.g., http://localhost:8000/wp-json/wp/v2 or similar.

Answer 1

From vue-loader docs:
Dynamically Generated Content
DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.
So to style the dynamic content, you should use deep selectors as seen in the following example:
<div class="posts">
<div v-for="(post, i) in posts" v-bind:key="i">
<div v-html="post.content.rendered"></div>
</div>
</div>
...
<style scoped>
.posts >>> p {
color: blue;
}
</style>
demo