Scoped CSS Doesn't work on dynamic content

[BubbleBear]

@yyx990803 ### Version 13.0.1

Reproduction link

http://null

Steps to reproduce

read the title

What is expected?

fix it

What is actually happening?

as is presented in title, the scoped CSS doesn't work on dynamic content created by third-party like jquery or even element-ui which claimed to be based on vuejs. yes, your scope idea is brilliant, but still flawed.

---

here i offer a solution. for example, i got a hash attribute appended to my CSS selector like this:

.el-tabs .el-tabs__item[data-v-0b32934b]

and because the element decorated by .el-tabs__item is dynamically generated, which doesn't have the hash attribute, this element is never to be reached. but if you prepend the hash attribute to origin CSS selector, like this:

[data-v-0b32934b].el-tabs .el-tabs__item (if the first selector is root)

or [data-v-0b32934b] .el-tabs .el-tabs__item (if the first selector is not root)

it would work prefectly.

[zhuyunhe]

i have this problem too

[BubbleBear]

I'm trying to solve this problem by rewriting the style parser part. and save it as a local module.... hope there would be an official bugfix release. 不过尤雨溪好像对vue-loader关注挺少的 Sent from Mail Master On 07/14/2017 14:27, zhuyunhe wrote: i have this problem too — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[JounQin]

https://github.com/vuejs/vue-loader/releases/tag/v12.2.2 https://github.com/vuejs/vue-loader/releases/tag/v13.0.2

[BubbleBear]

@JounQin @yyx990803 I updated the vue-loader to v12.2.2, but the problem doesn't seem to be solved. :(

[hinaloe]

It looks not a bug, but you can use <style module> (CSS Modules) instead.

[BubbleBear]

@hinaloe I suppose it to be a bug actually, the meaning of a scoped area should be to have full access to globally properties, otherwise it's function could be really limited, while vue's scoped css doesn't serve dynamically created elements which aren't created via vue API. And I guess the solution I proposed could fix this problem.

And thx, CSS Modules can be a solution though not as handy as scoped CSS feature.

[inxi-pc]

Same issue, i am integrating datatables(), the table filter and table pagination is dynamic content created by datatabes api.

[yyx990803]

You can use the deep selector to style dynamic content since 12.2.0 https://github.com/vuejs/vue-loader/releases/tag/v12.2.0

[bgondy]

@yyx990803 Deep selector doesn't seem to work in combination with sass-loader.

[lucas-bremond]

/deep/ selectors seem to be deprecated now... what's the correct way?

[antonio7905]

@lucas-bremond /deep/ still work with vue-loader@13.7.1 , e.g.

div /deep/ .dynamic-item {
    font-size: 20px;
}

[lucas-bremond]

@AntonioTsai Yes it does, but Chrome is issuing warnings... any alternative?

[antonio7905]

@lucas-bremond Maybe using a pre-processors is a solution? I am using /deep/ with SCSS in .vue file, shown as below

<style lang="scss" scoped>
footer .row {
  .language-switch /deep/ .btn {
    padding-left: 0;
    padding-right: 0;
  }
}
</style>

In this case, sass-loader parse the /deep combinator before render, below is the code shown in Chrome Devtool > Element > Styles

footer .row .language-switch[data-v-40ba164c] .btn {
    padding-left: 0;
    padding-right: 0;
}

Please let me know if I am wrong.

[kinoli]

This is still a bug even with 14.2.1 release.

[yyx990803]

@kinoli this is intended behavior, read the thread please.