CSS: Pseudo-elemento o pseudo-clase desconocido “::ng-deep”.

::ng-deep es un combinador de pseudo-clase específico del sistema de encapsulación de vistas de Angular. Le dice al compilador de Angular que deshabilite la encapsulación de estilos para una regla CSS particular, permitiendo que esa regla penetre en las vistas de componentes hijos. Debido a que no está definido en ninguna especificación CSS de W3C o WHATWG, el validador CSS lo marca como un pseudo-elemento o pseudo-clase desconocido.

Esto es importante de entender por varias razones:

• No es una característica CSS estándar. Ningún navegador entiende nativamente ::ng-deep. La cadena de herramientas de construcción de Angular lo procesa y elimina en tiempo de compilación, reescribiendo el selector antes de que llegue al navegador. El validador verifica contra las especificaciones CSS y correctamente no lo reconoce.
• Está deprecado dentro del propio Angular. El equipo de Angular ha deprecado ::ng-deep y planea eliminarlo en una versión futura. El uso continuo ata tu base de código a una característica sin soporte a largo plazo.
• Puede causar filtración global de estilos no deseada. Cuando se combina con :host de manera incorrecta o se usa sin cuidado, ::ng-deep puede filtrar estilos hacia componentes donde no estaban destinados, haciendo tu aplicación más difícil de mantener.

Cómo solucionarlo

Hay varios enfoques dependiendo de tu situación:

1. Acepta la advertencia de validación

Si estás trabajando en un proyecto Angular y necesitas ::ng-deep temporalmente, puedes reconocer esto como una advertencia conocida específica del framework. El validador es técnicamente correcto — el selector no es CSS válido — pero el compilador de Angular lo maneja antes de que llegue al navegador.

2. Usa hojas de estilo globales

Mueve los estilos que necesitan cruzar límites de componentes a una hoja de estilo global (como styles.css). Los estilos globales no están encapsulados y naturalmente se aplican a todos los componentes.

3. Establece ViewEncapsulation a None

Deshabilita la encapsulación de vista en el componente que necesita dar estilo a sus hijos. Esto hace que todos los estilos de ese componente sean globales en alcance, eliminando la necesidad de ::ng-deep.

4. Usa propiedades personalizadas CSS (Recomendado)

El enfoque más compatible con los estándares es usar propiedades personalizadas CSS (variables) para crear una API de temas para tus componentes. Las propiedades personalizadas naturalmente heredan a través del árbol DOM, cruzando las fronteras de shadow DOM y encapsulación de Angular.

Ejemplos

❌ Usando ::ng-deep (Desencadena la advertencia de validación)

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

El validador no reconoce ::ng-deep y reporta el error.

✅ Usando una hoja de estilo global en su lugar

En tu archivo global styles.css, apunta al elemento con una clase específica o selector:

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

Esto evita ::ng-deep completamente al colocar la regla fuera de los estilos con alcance de componente.

✅ Usando propiedades personalizadas CSS

Define propiedades personalizables en el CSS del componente hijo:

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

Luego establece los valores desde el CSS del componente padre:

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

Este enfoque es completamente compatible con estándares, pasa la validación CSS, y crea una API de estilos limpia entre componentes. Las propiedades personalizadas CSS heredan naturalmente a través del DOM, por lo que funcionan a través de límites de componentes sin romper la encapsulación.

✅ Usando ::part() para componentes web

Si tus componentes hijos usan shadow DOM (o estás migrando hacia componentes web), el pseudo-elemento estándar ::part() te permite exponer elementos específicos para estilos externos:

/* Estilos del padre apuntando a una parte expuesta */
child-component::part(button) {
  background-color: blue;
  color: white;
}

El pseudo-elemento ::part() es un estándar W3C y está completamente reconocido por el validador CSS.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios