El origen de
css con ámbito siempre ha tenido un problema de alcance problemático: incluso bajo programación modular, importar css en el js del módulo correspondiente, este css sigue siendo global. Para evitar la contaminación entre estilos CSS, se introduce el concepto de ámbito en vue.
En la etiqueta de estilo en el archivo vue, hay un atributo especial: scoped. Cuando una etiqueta de estilo tiene un atributo de ámbito, su estilo CSS solo se puede aplicar al componente actual. Al establecer esta propiedad, los estilos entre componentes no se contaminan entre sí. Si todas las etiquetas de estilo en un proyecto se agregan dentro del alcance, es equivalente a la modularización de estilos.
Pero, ¿cómo estos estilos no se afectan entre sí?
El principio de alcance
El alcance en vue es garantizar la singularidad (y este trabajo se logra mediante la traducción PostCSS) agregando una marca única no repetitiva en la estructura DOM y el estilo CSS: data-v-hash, para lograr la privatización del estilo y el propósito de modularización.
Resuma las tres reglas de representación de scoped:
1. Agregue un atributo de datos único (formulario: data-v-19fca230) al nodo DOM HTML para indicar su singularidad.
2. Agréguelo al final de cada selector css (declaración css generada compilada) Un selector de atributos de datos de la componente (como [data-v-19fca230]) para privatizar el estilo
3. Si el componente contiene otros componentes, solo el atributo de datos del componente actual se agregará a la etiqueta más externa del otro componente
<style lang="scss" scoped>
.test {
background: blue;
span{
color:red;
}
}
</style>
<template>
<div class="test">
<span>hello world !</span>
</div>
</template>
Después de la traducción:
<style lang="css">
.test[data-v-ff86ae42] {
background: blue;
}
.test span[data-v-ff86ae42]{
color: red;
}
</style>
<template>
<div class="test" data-v-ff86ae42>
<span data-v-ff86ae42>hello world !</span>
</div>
</template>
Se puede ver que postCSS agregará un atributo dinámico único data-v-xxxx a todos los doms en un componente, y agregará un selector de atributo correspondiente al selector CSS para seleccionar el dom en el componente. Este enfoque hace que el estilo solo actúe en el dom que contiene el atributo --- el dom interno del componente, logrando así el efecto de 'modularización de estilo'.
Alcance penetrante
Sin embargo, en el proyecto, encontrará un problema, es decir, hacer referencia a componentes de terceros, debe modificar localmente el estilo del componente de terceros en el componente y no desea eliminar el alcance atributo para causar contaminación de estilo entre componentes.
Se recomienda el método ** :: deep **.