Scoped css for dynamic element

[anit05]

Hi
I am trying to implement Vuetable2 using render functions which creates it dynamically.It has specific css requirement.
When i import css in component like

<style src="src" ></style>, it works fine for my datatable.

However ,when i load css like

<style src="src" scoped></style>,

it does not apply to some of the parts that are being created dynamically.

I understand that making css scope adds a unique identification( that is scopeId) with css as well as static content present on the page.
I want to know how to associate this scopeId with dynamically created contents as well.
What are the ways i can achieve this.

Please let me know whether it is clear what i want to achieve or further information is required.

Thanks

[Jinjiang]

Does this.$options._scopeId help you writing scoped attribute dynamically in render functions?
Or could you please supply a demo?
Thanks.

[shelune]

If it's just normal CSS you can do it like

.foo >>> .bar {style here}

Or for SCSS it can be like

.foo {
  /deep/ .bar {style here}
}

[anit05]

@Jinjiang this.$options._scopeId has not helped.
I thought of using it earlier but has not had much success with this.

@shelune I am loading external css using CDN (i can do that locally for that matter).
So should i need to modify my CSS for SCSS ?

Thanks

[shelune]

@anit05 not sure if I understand your question clearly?

[lucas-bremond]

Now that /deep/ has been deprecated, what's the solution?

[karthiksubbu]

Now this /deep/ has been deprecated.., What is the solution? Any Help? Thanks in advance..

[yyx990803]

/deep/ is deprecated in actual CSS but still valid as a pre-processor hint in vue-loader. When you use it in vue-loader it gets compiled away so it doesn't matter whether it's deprecated or not.