Problem description

Before the development of vue front-end project, in a page component to change the style of the third party component through CSS, but do not want to change the global, only change the page referenced component style, try to use custom className in the page or copy the third party component className to modify, found that however and soft…

The solution

Later, I found a depth selector: /deep/ (>>>). Usage:

/deep/ .van-icon-arrow-down {
        font-size: 0.2rem;
    }
Copy the code

It is a perfect solution to my problem, but as a primary school student of front-end development, I am full of curiosity for knowledge. Why didn’t copying or customization work before? Why did this work again

Question why

Scoped. I love to hate scoped

<style lang="scss" scoped>
    .van-field__label {
        width: 0rem ! important;    }
.<style> Copy the code

Here’s what scoped does:

Privatize the component without global style contamination, indicating that the current style attribute belongs only to the current module

“

So how does this work? Scoped component dom is compiled with the custom data-v-[hash value] attribute by comparing the scoped and unscoped component elements.

  • This is a dom screenshot of style without scoped

  • Here is a dom screenshot of style with scoped added


According to the documents on vuE-Loader’s official website:

With scoped, the style of the parent component does not permeate into the child components. However, the root node of a child component is affected by both its parent’s Scoped CSS and the child’s scoped CSS. This is designed so that the parent component can adjust the style of the root element of its child component from a layout perspective.

“

It then provides depth selectors that can affect deeper components, but some preprocessors like Sass don’t parse correctly. In this case you can use the /deep/ or ::v-deep operators instead — both are aliases for >>> and work just as well. Ok, if there is a flaw in the above content, hope to correct!

Reference: Vue-loader documentation