The origin of the scoped

CSS has always had a troubling scope problem: even with modular programming, importing CSS from the js of the corresponding module is still global. To avoid contamination between CSS styles, the concept of scoped was introduced in VUE.

On the style tag in the Vue file, there is a special attribute: scoped. When a style tag has the scoped attribute, its CSS styles apply only to the current component. This property is set so that styles between components do not pollute each other. If all style tags in a project are scoped, the style is modularized.

But how do these styles not affect each other?

The principle of scoped

Scoped in Vue helps to privatize the modularity of styles by adding a unique, data-V-hash tag to DOM structures and CSS styles (this is done by PostCSS translation).

To summarize scoped’s three rendering rules:

  1. Add a non-repeating data attribute (such as data-V-19fCA230) to the HTML DOM node to indicate its uniqueness
  2. At the end of each CSS selector (the compiled generated CSS statement), add a data property selector for the current component (such as [data-V-19fCA230]) to privatize the style
  3. If the component contains other components, only the data attribute of the current component is added to the outermost tag of the other component

Last chestnut. Before the translation:

<style lang="scss" scoped>
    .test {
        background: blue;
        span{
            color:red;
        }
    }
</style>
<template>
    <div class="test"> <span>hello world ! </span> </div> </template>Copy the code

After the translation:

<style lang="css">
    .test[data-v-ff86ae42] {
        background: blue;
    }
    .test span[data-v-ff86ae42]{
        color: red;
    }
</style>
<template>
    <div class="test"data-v-ff86ae42> <span data-v-ff86ae42>hello world ! </span> </div> </template>Copy the code

As can be seen: PostCSS adds a unique dynamic property data-V-xxxx to all the DOM in a component, and then adds a corresponding property selector to the CSS selector to select the DOM in that component. This allows the style to be applied only to the DOM containing the property — the dom inside the component, thus achieving the effect of ‘style modularity’.

Through the scoped

However, when working on a project, you may encounter the problem of referencing a third party component and having to modify the style of the third party component locally within the component without removing the scoped attribute and contaminating the style between components. So what are the solutions?

  1. Do not use scoped ellipsis (personally not recommended)
  2. Use the style tag twice in the template:
<style lang="scss"> /* Add a style to override */ </style> <style lang="scss" scoped>
    /* localstyles */ </style> <! A.vue file can contain multiple style tags. So there's no problem with the way I wrote it. -->Copy the code
  1. Through the scoped > > >
<template>
  <div class="box"> <dialog></dialog> </div> </template> <! -- use the >>> or /deep/ operators (preprocessors like Sass cannot parse correctly >>>, you can use /deep/) --> <style lang="scss"scoped> .box { /deep/ input { width: 166px; text-align: center; </style> or <style lang="scss" scoped>
.box >>> input {
    width: 166px;
    text-align: center;
  }
}
</style>
Copy the code

I hope I can help you with the same problem, thanks!