When writing a vue component, style can add the scoped attribute. What exactly does this attribute do, and what role and impact will it have?
1. Add the scoped attribute to the style tag. After this style sheet is compiled, the generated style class will add a hash value (actually an attribute selector)
Such as:
.v-customer{
color:red;
}
After compiling becomes:
.v-customer[data-v-123456] {
color:red;
}
2. At the same time, if the HTML tags rendered by the component are used in the class in this style sheet, a native data- * tag attribute (attribute) with the same hash value will be added
如：<span data-v-123456 class="v-customer">xxx</span>
When the style has multiple levels of nesting, the hash value will only be added to the lowest class
Such as:
.v-customer {
color:red;
._ccc {
color:red;
}
}
After compilation:
.v-customer[data-v-123456] {
color:red;
}
.v-customer ._ccc[data-v-123456] {
color:red
}
3. Styles with hash values only take effect for html tags with the same hash value
4. Each component (class) has a unique hash value, and multiple instances of a component have the same hash value
5. This style with hash value will have a higher priority than the same style without hash value, which is actually equivalent to adding a layer of attribute selector weight
css priority relationship: inline style> ID selector> class selector> attribute selector> pseudo-class selector> tag selector> pseudo-element selector
Such as:
<style scpoed>
.v-customer {
._ccc {
color:red;
}
}
</style>
<style >
.v-customer {
div {
._ccc {
color:red;
}
}
}
</style>
The style compiled in this way is
.v-customer ._ccc[data-v-123456] {
color:red
}
.v-customer div ._ccc{
color:red
}
It can be seen from the weight that the weight of the attribute selector is higher than the label selector, therefore, the above style will have higher priority
Another example:
<style scpoed>
.v-customer {
._ccc {
color:red;
}
}
</style>
<style >
.v-customer {
.cus {
._ccc {
color:red;
}
}
}
</style>
It can be seen from the weight that the weight of the class selector is higher than the attribute selector, so the following style will have higher priority
to sum up
1. The scoped component style is not uncoverable, as long as the outside style priority is sufficient, it can still be covered
2. The scoped style only takes effect for the current component, so it will not pollute other components and subcomponents
3. If you want the style in scoped style to be a style without hash for sub-component use, you can use / deep /, which will make the compiled class without hash
Such as:
<style scpoed>
.v-customer {
/deep/ ._ccc {
color:red;
}
}
</style>
After compilation:
.v-customer ._ccc {
color:red;
}
Classes and subclasses modified by / deep / will not be hashed
