vue-loader: Scoped CSS Doesn't work on dynamic content

@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.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 2
  • Comments: 15 (2 by maintainers)

Most upvoted comments

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.