Funcionalidades de CSS ​

CSS Isolado ​

Quando um marcador <style> tiver o atributo scoped, o seu CSS apenas aplicar-se-á aos elementos do componente atual. Isto é semelhante ao encapsulamento de estilo encontrado no DOM de Sombra. Ele vem com algumas advertências, mas não exige quaisquer preenchimento de funcionalidade. Ele é alcançado usando PostCSS para transformar o seguinte:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

No seguinte:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

Elementos de Raiz do Componente Filho ​

Com scoped, os estilos do componente pai não passarão para os componentes filhos. No entanto, um nó de raiz do componente filho será afetado por ambas CSS isolada do pai e a CSS isolada do filho. Isto é de propósito para que o pai possa estilizar o elemento de raiz filho para fins de disposição.

Seletores Profundos ​

Se quisermos que um seletor nos estilos scoped torne-se "profundo", ou seja, afete componentes filho, podemos usar a pseudo-classe :deep():

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

O código acima será compilado para:

.a[data-v-f3f3eg9] .b {
  /* ... */
}

Seletores Inseridos ​

Por padrão, os estilos isolados não afetam os conteúdos interpretados pelo <slot/>, uma vez que são considerados ser propriedade do componente pai que está a passá-los. Para explicitamente atingir o conteúdo da ranhura, usamos a pseudo-classe :slotted:

<style scoped>
:slotted(div) {
  color: red;
}
</style>

Seletores Globais ​

Se quisermos que apenas uma regra aplique-se globalmente, podemos usar a pseudo-classe :global ao invés de criar um outro <style> (consulte o exemplo abaixo):

<style scoped>
:global(.red) {
  color: red;
}
</style>

Misturando Estilos Locais e Globais ​

Nós também podemos incluir ambos estilos isolados e não isolados no mesmo componente:

<style>
/* estilos globais */
</style>

<style scoped>
/* estilos locais */
</style>

Dicas de Estilo Isolado ​

• Os estilos isolados não eliminam a necessidade de classes. Por causa da maneira que os navegadores interpretam os vários seletores de CSS, p { color: red } será muitas vezes mais lento quando isolado (ou seja, quando combinado com um seletor de atributo). Se usarmos as classes (por exemplo, .class-name) ou identificadores (por exemplo, #id-name), tal como em .example { color: red }, então eliminamos virtualmente este impacto de desempenho.

• Temos que ter cuidado com os seletores de descendentes nos componentes recursivos! Para um regara de CSS com o seletor .a .b, se o elemento que corresponde .a contiver um componente filho recursivo, então todos os .b neste componente filho serão correspondidos pela regra.

Módulos de CSS ​

Um marcador <style module> é compilado como Módulos de CSS e expõe as classes de CSS resultantes ao componente como um objeto sob a chave de $style:

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

As classes resultantes têm o seu nome gerados com caracteres embaralhados para evitar colisões, alcançando o mesmo efeito de isolar o CSS apenas ao componente atual.

Consulte a especificação dos Módulos de CSS por mais detalhes, tais como exceções globais e composição.

Nome de Injeção Personalizado ​

Nós podemos personalizar a chave da propriedade do objeto de classes injetadas dando ao atributo module um valor:

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

Uso com API de Composição ​

As classes injetadas podem ser acessadas na setup() e no <script setup> através da API useCssModule. Para os blocos <style module> com nomes de injeção personalizados, useCssModule aceita o valor do atributo module correspondente como primeiro argumento:

import { useCssModule } from 'vue'

// dentro do âmbito de setup()...
// padrão, retorna as classes do marcador `<style module>`
useCssModule()

// personalizado, retorna as classes do marcador `<style module="classes">`
useCssModule('classes')

v-bind() na CSS ​

Os marcadores <style> do componente de ficheiro único suportam vincular os valores de CSS ao estado do componente dinâmico usando a função de CSS v-bind:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

A sintaxe funciona com o <script setup>, e suporta expressões de JavaScript (devem estar envoltos por aspas):

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>olá</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

O verdadeiro valor será compilado numa propriedade personalizada de CSS com nome composto por caracteres embaralhados, assim a CSS continua estática. A propriedade personalizada será aplicada ao elemento de raiz do componente através de estilos em linha e atualizada de maneira reativa se o valor de origem for mudado.