Summary of the use of CSS scope (style splitting)

1. Use of CSS scope (style division)

In Vue, make the CSS style take effect only in the current component: scoped attribute is a new attribute in HTML5. It is a Boolean attribute. If this attribute is used, the style is only applied to the parent element and its child elements of the style element.

2. Implementation principle of scoped

The effect of scoped attributes in Vue is mainly achieved through PostCSS translation. The following is the Vue code before translation:

  <style scoped>
    .test {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test">Hi world</div>
  </template>

After translation:

  <style>
    .test[data-v-5559930f] {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test" data-v-5559930f>Hi world</div>
  </template>

PostCSS adds a unique dynamic property to all DOM in a component, and then adds an additional corresponding attribute selector to the CSS selector to select the DOM in the component. This approach makes the style only work on the DOM containing the property <component internal DOM>.

3. Scoped penetration method

In many projects, when referencing a third-party component, you need to modify the style of the third-party component locally in the component, but you don't want to remove the scoped attribute to cause style pollution between components. At this time, some special methods are needed to penetrate the scoped.

Method 1: Use >>> to penetrate the scoped attribute and modify the styles of other third-party components.

Method 2: Use two style tags, one with a scoped attribute and one without scoped attribute, to modify the style of third-party components.

Method 3: Use sass or less styles to penetrate /deep/

Method 4: Distinguish by adding id or class at the outermost layer.

This is the end of this article about CSS scope (style splitting). For more relevant CSS scope content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!