Qué usar en lugar de ::ng-deep
Estoy intentando diseñar un elemento colocado junto a la salida del enrutador en angular y quiero asegurarme de que el elemento generado tenga un ancho del 100%.
En la mayoría de las respuestas, veo que debería usar el selector, pero en los documentos::ng-deep de Angular está obsoleto. ¿Existe una alternativa a ?::ng-deep
FWIW En mi investigación no he encontrado ningún reemplazo para ng-deep u otras alternativas aplicables. Esto se debe a que, creo, el equipo de Angular se está remitiendo a la especificación W3C en el Shadow Dom, que inicialmente tenía selectores como deep. Sin embargo, el W3c eliminó la recomendación, pero no la reemplazó por una nueva. Hasta que eso suceda, imagino que el equipo de Angular mantendrá ::ng-deepsus 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 que respalde esto en este momento, pero la vi recientemente.
En pocas palabras: siga usando ::ng-deepsus alternativas hasta que se cree un reemplazo; la desactivación es solo un aviso temprano para que las personas no se queden sorprendidas cada vez que se materialice el cambio real.
-- ACTUALIZAR --
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 sólido de selectores para elementos dentro de un árbol dom en la sombra; Es esta especificación, una vez aprobada, la que creo que informará al clon angular, si es que existe uno (es decir, es posible que Angular no necesite implementar sus propios selectores una vez que esté activo en los navegadores).
La alternativa sencilla y sencilla a un estilo profundo es un estilo común que utiliza el selector de elementos del componente principal. Entonces, si tuvieras esto en hero-details.component.css:
:host ::ng-deep h3 {
font-style: italic;
}
Se convertiría en esto en estilos.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 importantes son normales en las actualizaciones de versiones principales y la eliminación de funciones obsoletas es un juego limpio.
Para evitar lo obsoleto ::ng-deep, normalmente lo desactivo ViewEncapsulation. Aunque este no es el mejor enfoque, me ha resultado muy útil.
Para deshabilitarlo 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 de este componente sean globales para toda la aplicación. Para no permitir que los estilos suban en la cadena hasta los componentes principales y hermanos, envuelva todo el scss 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 más 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 por el párrafo anterior, pero me ha resultado muy útil.
