Selectores CSS especiales en Vue 3

Al trabajar en tus proyectos JavaScript con Vue 3, tienes a tu alcance algunos selectores CSS que te harán la vida más fácil. En este DevTip conocerás algunos selectores CSS de Vue 3 como deep, slotted y global. Vamos allá.

Pseudo-clase :deep

Como seguro ya sabes, puedes utilizar el atributo scoped (vue style scoped) para escribir CSS y así impedir que tus estilos afecten a posibles sub-componentes. Pero, ¿qué ocurre si necesitas que al menos una regla sí afecte a tu componente hijo?. Para ello puedes usar la pseudo-clase :deep de Vue 3.

<style scoped>
	span :deep(small) {
	    // Se propaga hacia todos los subcomponentes
        padding: 10rem;
	}
	
	div {...}
</style>

Pseudo-clase :slotted

Por defecto, los estilos escritos con el atributo scoped no afectan al contenido de un <slot/> (se consideran pertenecientes al componente ancestro que los pasa). Sin embargo, puedes usar la pseudo-clase :slotted para llegar a ellos.

<style scoped>
	:slotted(div) {
	    // El fondo de los div en slot será dorado
	    background-color: goldenrod;
	}

	.link {...}
</style>

Pseudo-clase :global

¿Y qué ocurre si dentro de un bloque CSS scoped necesitas aplicar estilos de forma global?. Para ello tienes la pseudo-clase :global.

<style scoped>
  :global(html) {
      // Se aplica de forma global
      box-sizing: border-box;
  }

  .card {...}
</style>

Eso sí, recuerda que si el código CSS que debe afectar globalmente tu proyecto es extenso, siempre puedes combinar un bloque CSS con el atributo scoped y otro sin él.

<style>
  html {
    box-sizing: border-box;
  }
</style>

<style scoped>
	.card {...}
</style>