html - example - ng deep angular 7

Qué usar en lugar de:: ng-deep

Question

Estoy tratando de diseñar un elemento colocado por la salida del enrutador en angular y quiero asegurarme de que el elemento generado tenga un ancho del 100%.

De la mayoría de las respuestas, veo que debería usar el selector ::ng-deep , pero de los docs de Angular está en desuso. ¿Hay una alternativa a ::ng-deep ?

Answer 1

Esto no es un reemplazo general para :: ng-deep, sino para el caso de uso descrito por el autor de la pregunta:

En el caso especial en el que desea aplicar un estilo al elemento insertado por una salida de enrutador, existe una solución elegante que utiliza el selector adyacente adyacente en CSS:

router-outlet+* {
  /* styling here... */
}

Esto se aplicará a todos los elementos que sean vecinos directos de una salida de enrutador.

Otras lecturas:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Answer 2

FWIW En mi investigación no he encontrado ningún sustituto para ng-deep u otras alternativas aplicables. Esto se debe a que, creo, el equipo Angular está aplazando la especificación W3C en el dom de la sombra, que inicialmente tenía selectores como deep . Sin embargo, el W3c ha eliminado la recomendación, pero no la ha reemplazado con una nueva. Hasta que eso suceda, me imagino que el equipo de Angular mantendrá ::ng-deep y sus alternativas disponibles, pero en estado obsoleto debido al estado pendiente de los borradores del W3C. No puedo tomarme el tiempo para encontrar la documentación para respaldar esto en este momento, pero la vi recientemente.

Larga historia corta: siga usando ::ng-deep y sus alternativas hasta que se cree un reemplazo: la desaprobación es solo una notificación temprana para que las personas no se sorprendan cada vez que se materialice el cambio real.

- ACTUALIZACIÓN -

https://drafts.csswg.org/css-scoping-1/ Aquí está el borrador de la propuesta si está interesado. Parece que están trabajando en un conjunto robusto de selectores para elementos dentro de un árbol dom de sombra; Es esta especificación, una vez aprobada, la que creo que informará al clon angular, si es que existe una (es decir, es posible que angular no tenga que implementar sus propios selectores una vez que se active en los navegadores).

Answer 3

La alternativa simple y fácil a un estilo profundo es un estilo común que utiliza el selector de elementos del componente principal. Así que si tuviste esto en hero-details.component.css:

:host ::ng-deep h3 {
  font-style: italic;
}

Se convertiría en esto en styles.css:

app-hero-details h3 {
  font-style: italic;
}

Básicamente, un estilo profundo es un estilo no encapsulado, por lo que conceptualmente me parece más un estilo común que un estilo componente. Personalmente ya no usaría estilos profundos. Los cambios de última hora son normales en las actualizaciones de versiones principales y la eliminación de características obsoletas es un juego justo.

Answer 4

Para omitir el deprecated ::ng-deep , normalmente deshabilito ViewEncapsulation . Aunque este no es el mejor enfoque, me ha servido bien.

Para deshabilitar ViewEncapsulation , haga lo siguiente en su componente:

import { Component, ViewEncapsulation } from ''@angular/core'';

@Component({
  selector: ''app-header'',
  templateUrl: ''./header.component.html'',
  styleUrls: [''./header.component.scss''],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

Esto hará que los estilos .scss en este componente sean globales para toda la aplicación. Para no permitir que los estilos suban la cadena a los componentes primarios y hermanos, envuelva el scss completo con el selector de esta manera:

app-header {
  // your styles here and any child component styles can go here
}

Ahora, los estilos especificados aquí se reducirán a los componentes secundarios, por lo que debe ser muy específico con sus selectores css y tener en cuenta sus p y q al agregar CSS (tal vez agregue el selector secundario especificado en su aplicación Angular y luego sus estilos).

Digo que no es el mejor enfoque debido al párrafo anterior, pero esto me ha servido bien.