Quando trabalhamos com um Single File Component (SFC) podemos definir características próprias para o componente. Qual palavra-chave utilizamos na tag style dentro de um SFC, para que o estilo seja aplicado somente a esse componente e seus filhos?
Questão
Quando trabalhamos com um Single File Component (SFC) podemos definir características próprias para o componente. Qual palavra-chave utilizamos na tag style dentro de um SFC, para que o estilo seja aplicado somente a esse componente e seus filhos?
Alternativas
A) exclusive
B) scoped
C) scope
D) inclusive
E) only
Explicação
Em um Single File Component (SFC) do Vue, podemos limitar o CSS para que ele afete apenas o próprio componente (e os elementos gerados dentro dele, isto é, seus “filhos” no DOM do componente).
-
Dentro do SFC, o estilo é declarado na tag:
<style> /* CSS */ </style> -
Para fazer com que esse CSS seja encapsulado no componente (não “vaze” para outros componentes da aplicação), usamos o atributo/palavra‑chave
scoped:<style scoped> .btn { color: red; } </style> -
Com
scoped, o Vue adiciona atributos específicos aos elementos renderizados e ajusta os seletores do CSS, garantindo que o estilo se aplique somente àquele componente.
Alternativa correta: (B).