Scoped styles don't apply to v-html injections

Version

11.0.0

Reproduction link

https://github.com/foundryspatial-duncan/vue-loader-issue-demo/blob/master/src/App.vue

Steps to reproduce

1. In a single-file Vue component (.vue file), add some scoped styles (with the scoped property on the style tag).
2. Inject some HTML that matches your scoped style’s selector with v-html

What is expected?

The styles would affect the injected HTML

What is actually happening?

The styles do not affect the injected HTML

---

Looks like HTML injected with v-html aren’t given the “data-v-[hash]” property (like data-v-08ce5946). I think there’s a proposal somewhere to only add the data-v-[hash] to the component’s root element and then prefix all the styles to scope them. That would solve this issue as well.

[MikaelEdebro]

You can use the /deep/ selector to get your styles to be applied:

<div class="description" v-if="description" v-html="description"></div>

.description {
  /deep/ p {
    margin-bottom: 10px;
  }
}

[alancwoo]

I stumbled upon this today and oddly, nothing was working (unscoped css, global css).

I noticed that while this solution worked, the /deep/ selector was deprecated by some time ago and throws errors in IE: https://stackoverflow.com/questions/25609678/what-do-deep-and-shadow-mean-in-a-css-selector

I then found this: https://medium.com/@brockreece/scoped-styles-with-v-html-c0f6d2dc5d8e

Which recommends something along the lines of:

.description >>> p {
  margin-bottom: 10px;
}

Which works as well, without a deprecated selector.

edit: Then again, the vue docs say >>> is just an alias for /deep/, so I’m not sure anymore https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors