Introduction to the
On the style tag in the Vue file, there is a special attribute: scoped. When a style tag has the scoped attribute, its CSS style applies only to the current component; that is, the style applies only to the current component element. With this property, styles between components can be kept from contaminating each other. If all style tags in a project are scoped, the style is modularized.
Realize the principle of
PostCSS escape is used.
PostCSS adds a unique dynamic property to all the DOM in a component, and then adds a corresponding property selector to the CSS selector to select the DOM in that component. This makes the style apply only to the DOM that contains that property — the component’s internal DOM.
<p class="example" data-v-5558831a>hi</p>
.example[data-v-5558831a] {}
Copy the code