Analysis of scoped attribute principle and depth action selector

scoped effect

When <style> The label has scoped Attribute , its CSS Only the elements in the current component

scoped The goal is

scoped To privatize components , Express style Only belong to the current module , Don't pollute the whole situation .

Use scoped after , The style of the parent component will not penetrate into the child component . However, the root node of a child component will be affected by the scope of its parent component CSS And subcomponents CSS Influence . This is designed so that the parent component can start from the perspective of layout , Adjust the style of its child component root element .

scoped principle

By observing the rendered html And CSS You can find , add to scoped Component of property ,DOM In the structure data-v-469af010 Field of , Equivalent to a unique identifier .

Added scoped Component of property , To achieve the goal of component privatization ：

• stay DOM The structure adds data-v-469af010 Unique identifier
• Add an equivalent to after each style selector of the component “ Do not duplicate attributes ” Same fields , The implementation is similar to “ Scope ” The role of , It doesn't affect the whole picture
• If there are components inside the component , Only the tags in the outermost component will be added with unique attribute fields , Components that do not affect component internal references

Mix local and global styles

Scoped and non scoped styles in a component can be used at the same time

<style> /*  Global style  */ </style>

<style scoped> /*  Local style  */ </style>

Scenarios used with caution

It can be seen from the principle that , The reason scoped Similar components can be privatized 、 The style is set “ Scope ” The effect of , In fact, it's just setting up scoped Property to add a unique data The properties of the beginning , And add the same field as the attribute at the end of the tag selector , Play a unique role , However, if other components are also referenced in the component, the following problems will occur ：

• Parent component none scoped attribute , With subassemblies scoped, The parent component cannot manipulate the style of the child component , Although we can set the style globally through the label selector of this kind of label , But it will affect other components
• Parent component has scoped attribute , Sub assembly none , The parent component cannot set the style of the child component , Because all the labels of the parent component will have data-v-469af010 The only sign , But the subcomponent will not have this unique flag attribute , And 1 Empathy , Although we can set the style globally through the label selector of this kind of label , But it will affect other components
• Both parent and child components have scoped attribute , Similarly, you can't set the style ,

Depth action selector

Write it at the front , Only recommended at present ::v-deep

Official documents ：

If you wish scoped A selector in the pattern works “ deeper ”, For example, affect subcomponents , You can use >>> The operator ：

<style scoped> .a >>> .b {
       /* ... */ } </style>

Something like Sass Preprocessor like that doesn't parse properly >>>. In this case you can use /deep/ Operator instead —— This is a >>> Another name for , It also works .

correct ：

however , Not all operators are Dad's good children , Some of them have been officially abandoned , According to Youyu River 2020 year 9 This article of the month article , We can probably learn that ：

1. It was originally used >>> In order to achieve “deep” The effect of , But some CSS Preprocessor does not support

2. Then I chose /deep/, It used to be CSS A real proposal for （ Even in Chrome Bring it with you ）, But it was abandoned . So to avoid user confusion , Finally used ::v-deep（ Add a v, Prove it's me Vue Of pure blood ）

3. then Vue 3 coming , We can discard the burden of history , So in Vue 3 in , We no longer support >>> and /deep/ , I recommend you to use ::v-deep, And in order to better meet CSS Writing habits , I hope you can use ::v-deep(.class) The rules of writing

4. stay Vue 3 It is also provided ::v-slotted and ::v-global Two new operators , in the light of <slot> And the big picture CSS The rules

5. ::v-slotted The compiled attribute value is data-v-xxx-s,-s The suffix of makes it only for <slot> Content

6. ::v-global Compiled without data-v-xxx Properties of

Vue2:

• It is not recommended to use /deep/
• stay Sass And so on ::v-deep
• Use without a preprocessor >>>
• Use the above operator ,<style> There has to be scoped attribute

Vue3:

• I won't support it /deep/ and >>>
• Recommended ::v-deep(.class) Instead of ::v-deep .class
• in the light of <slot> have access to ::v-slotted Selectors
• have access to ::v-global Register global styles
• Use the above operator ,<style> There has to be scoped attribute

Reference documents

CSS Scope · vue-loader (vuejs.org)

vue in scoped The principle of and the reason for cautious use

Vue scoped Attribute and depth action selector