This is the 10th day of my participation in the August Text Challenge.”August More Challenge”

usage

Scope privates the component without global style contamination, indicating that the current style attribute belongs only to the current module.

Scope rendering rules

  1. Add a non-repeating data attribute (such as data-V-2311C06A) 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-2311c06a]) to privatise 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

Add global styles

Change the style of the imported component

While scope can be used to avoid global contamination of the current style, sometimes we need to change the style of the component in the imported project, so we need to use the depth selector: >>>, or in some precompilers this symbol is not available, we can change the style of the imported component by using /deep/ or :: V-deep

Use/deep/less
<style lang="less" scoped>

.searchforminline-out {

/deep/ input{

width: 50px;

}
</style>
Copy the code

Another way to change the global style

Keep the original

to modify the global style

Change the style of the app’s outer div to body

Due to scope, we cannot change the style of the div outside the app in the style inside the component, such as the body. If we want to change the body, we can change the style by adding CLAS to the body during the mount phase

<style lang="less" scoped>
.body{
    body{
        background-color:red;
    }
}
</style>
Copy the code
document.body.classList.add()
Copy the code





beforeDestroy(){
document.body.classList.remove()
}
Copy the code

Do not use scope to ensure that component styles do not pollute globally

Each component is given a div layer, set a unique class, write styles in the component, that is, apply div class as the beginning, this can be done in the global environment to use a separate style for the component.