Make writing a habit together! This is the NTH day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

preface

We often use some UI component libraries, especially those at the front of the Vue stack, in our development process. Especially, we often use element UI. We often modify the default style of these UI component libraries to use the depth selector. I researched it while I was at home and shared it here

Scoped’s mission and role

Here is a vUE demo, two pages, one page is a tag of digging gold, the other page is a tag of Vue, let’s see the function of Scoped, put red on the a tag of one page, the other page is not any style, and did not use the style of scoped, as shown below

You all know the answer, yes! Two pages in the link text is changed into red, when we click juejin this page, the browser will automatically is introduced into the style of the current page, then to click on the browser will reuse when making this style, so a link colours are red, because the Vue is a single page application, so we opened the style of each pageWill be clipped in a global styleThe solution is to add scoped. The color of TAB A is different now. Let’s open the page and take a look at TAB A (below).

There’s an extra “A” tagdata-v-xxxxxxxThis thing, this is the Vue plus for us, the Vue when building the project will carry us to component unit, under different components of all elements with the same component ID like things, at the same time will be written in our style to attribute selectors way of stitching on this unique identification, we to verify, (below)

That’s right. After we add scoped, Vue will add the attribute at the end of the style and select the element through the property selector to isolate the element style. Let’s look at the side effects of scoped

Side effects of scoped

Here we introduce element-UI to verify the side effects of scoped. Here we write a demo(below), and here we use scoped as well

Let’s examine the elements (below)

Note that the input element here does not have a unique identifier such as data-v-xxxxxx

But what does our own style (my-txt input) look like after it’s built? (below)

As shown in the above, our own writing style has been applied this unique identifier, so we can how to run it also can’t hit the elements, that is to say the Vue didn’t add the logo to the input, but in our style, combined with the logo, but if we remove the scoped, you can hit the target, But we don’t recommend this. Styles are packaged into one uniform style. This is a side-effect of scoped. Style through

Style penetration (:: V-deep)

We now add style penetration to hit the target

<style scoped>
.my-Txt {
  width: 200px;
}
.my-Txt ::v-deep input {
  background-color: pink;
}
</style>
Copy the code

Let’s take a look at what Vue does with the built style.

Vue will always concatenate this unique identifier at the end of the style we write. If we want to change the location of this unique identifier, we need you to specify it with style penetration. So the figure above means the my-txt element with this unique identifier. The input in its child element applies this style, and the my-txt we wrote also has this unique identifier, as you can see from the figure above

conclusion

Application in order to solve the multiple page style of different components in isolation, Vue introduced the concept of scoped style, but the Vue not all elements with a unique identifier, cause we can’t hit the element of time, we will use styles through to specify the identification only been spliced into CSS style which period!!!!!!

Husband learning must be static also, only to learn also, not learn beyond wide only, not beyond into learning. Slow sex can not stimulate the essence, risk impetuous can not cure sex. Year and time chi, meaning and day go, then withered