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

by

4👍

✅

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

👤tony19

Leave a comment