vue-loader: Scoped CSS Doesn't work on dynamic content
@yyx990803 ### Version 13.0.1
Reproduction link
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.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 2
- Comments: 15 (2 by maintainers)
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
/deep/selectors seem to be deprecated now… what’s the correct way?@yyx990803 Deep selector doesn’t seem to work in combination with
sass-loader.https://github.com/vuejs/vue-loader/releases/tag/v12.2.2 https://github.com/vuejs/vue-loader/releases/tag/v13.0.2