CSS: Pseudo-elemento ou pseudo-classe desconhecida “::ng-deep”.

::ng-deep é um combinador de pseudo-classe específico do sistema de encapsulamento de vistas do Angular. Indica ao compilador do Angular para desativar o encapsulamento de estilo para uma regra CSS específica, permitindo que essa regra penetre nas vistas de componentes filhos. Como não está definido em nenhuma especificação CSS do W3C ou WHATWG, o validador CSS marca-o como um pseudo-elemento ou pseudo-classe desconhecida.

Isto é importante de entender por várias razões:

• Não é uma funcionalidade CSS padrão. Nenhum navegador compreende nativamente ::ng-deep. A cadeia de ferramentas de compilação do Angular processa-o e remove-o no momento da compilação, reescrevendo o seletor antes de chegar ao navegador. O validador verifica as especificações CSS e corretamente não o reconhece.
• Está depreciado dentro do próprio Angular. A equipa do Angular depreciou ::ng-deep e planeia removê-lo numa versão futura. O uso continuado vincula o seu código a uma funcionalidade sem suporte a longo prazo.
• Pode causar vazamento de estilos globais não intencionais. Quando combinado com :host inadequadamente ou usado sem cuidado, ::ng-deep pode espalhar estilos para componentes onde não eram pretendidos, tornando a sua aplicação mais difícil de manter.

Como corrigir

Existem várias abordagens dependendo da sua situação:

1. Aceitar o aviso de validação

Se está a trabalhar num projeto Angular e precisa de ::ng-deep temporariamente, pode reconhecer isto como um aviso conhecido específico do framework. O validador está tecnicamente correto — o seletor não é CSS válido — mas o compilador do Angular gere-o antes de chegar ao navegador.

2. Usar folhas de estilo globais

Mova os estilos que precisam de atravessar fronteiras de componentes para uma folha de estilo global (como styles.css). Os estilos globais não são encapsulados e aplicam-se naturalmente a todos os componentes.

3. Definir ViewEncapsulation para None

Desative o encapsulamento de vista no componente que precisa de estilizar os seus filhos. Isto torna todos os estilos desse componente globais no âmbito, removendo a necessidade de ::ng-deep.

4. Usar propriedades personalizadas CSS (recomendado)

A abordagem mais conforme aos padrões é usar propriedades personalizadas CSS (variáveis) para criar uma API de temas para os seus componentes. As propriedades personalizadas herdam naturalmente através da árvore DOM, atravessando fronteiras de shadow DOM e encapsulamento do Angular.

Exemplos

❌ Usar ::ng-deep (desencadeia o aviso de validação)

:host ::ng-deep .child-button {
  background-color: blue;
  color: white;
}

O validador não reconhece ::ng-deep e reporta o erro.

✅ Usar uma folha de estilo global em vez disso

No seu ficheiro global styles.css, direcione o elemento com uma classe ou seletor específico:

app-parent .child-button {
  background-color: blue;
  color: white;
}

Isto evita completamente ::ng-deep colocando a regra fora dos estilos com âmbito de componente.

✅ Usar propriedades personalizadas CSS

Defina propriedades personalizáveis no CSS do componente filho:

/* Estilos do componente filho */
.child-button {
  background-color: var(--child-button-bg, gray);
  color: var(--child-button-color, black);
}

Em seguida, defina os valores no CSS do componente pai:

/* Estilos do componente pai */
:host {
  --child-button-bg: blue;
  --child-button-color: white;
}

Esta abordagem está totalmente conforme aos padrões, passa na validação CSS e cria uma API de estilização limpa entre componentes. As propriedades personalizadas CSS herdam naturalmente através do DOM, portanto funcionam através de fronteiras de componentes sem quebrar o encapsulamento.

✅ Usar ::part() para Web Components

Se os seus componentes filhos usam shadow DOM (ou está a migrar para web components), o pseudo-elemento padrão ::part() permite-lhe expor elementos específicos para estilização externa:

/* Estilos do pai direcionados a uma parte exposta */
child-component::part(button) {
  background-color: blue;
  color: white;
}

O pseudo-elemento ::part() é um padrão W3C e totalmente reconhecido pelo validador CSS.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços