Qué usar en lugar de :: ng-deep

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 ::ng-deepselector, pero de los documentos 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, creo, a que el equipo de Angular está cediendo a la especificación W3C en el dom de sombra, 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 para respaldar esto en este momento, pero la vi recientemente.

En pocas palabras: siga usando ::ng-deepy sus alternativas hasta que se cree un reemplazo; la desaprobación es solo un aviso temprano para que las personas no se sorprendan 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 robusto de selectores para elementos dentro de un árbol de dom de sombra; es esta especificación, una vez aprobada, la que creo que informará al clon angular, si es que hay uno (es decir, es posible que angular no necesite implementar sus propios selectores una vez que se active en los navegadores).

Para evitar lo obsoleto ::ng-deep, generalmente desactivo 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 de este componente sean globales para toda la aplicación. Para no permitir que los estilos suban por la cadena a los componentes principales y hermanos, envuelva todo el scss con el selector de la siguiente 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 cuando agregue 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.

La alternativa simple y fácil a un estilo profundo es un estilo común que utiliza el selector de elementos del componente principal. Entonces, si tuviera 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 importantes son normales en las actualizaciones de versiones principales y la eliminación de funciones obsoletas es un juego justo.

Como alguien dijo antes, si está utilizando una biblioteca de terceros, es prácticamente imposible evitar tener que usarla de ::ng-deepvez en cuando. Pero, ¿qué vas a hacer con tus proyectos anteriores cuando ::ng-deepya no sean compatibles con los navegadores?

Para estar preparado para ese momento, sugeriré lo siguiente:

1. Utilice ViewEncapsulation.None sabiamente. Lo que se traduce en solo para aquellos componentes que necesitan acceder a componentes más profundos.

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

2. Ahora, para evitar colisiones y rarezas de CSS, debe (como regla) siempre envolver la plantilla de su componente con una clase. Entonces, example.component.html debería ser como:

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

3. Nuevamente, por regla, la primera línea de cada archivo SCSS se dirigirá al contenedor de componentes. Como no hay encapsulación , puede modificar el componente de terceros dirigiéndose a sus clases. Dicho esto, example.component.scss debería ser como:

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

Este 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 diseñar el elemento insertado por un router-outlet, existe una solución elegante usando el selector de vecino adyacente en CSS:

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

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

Para leer más:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjected_sibling_combinator
https://angular.io/guide/router#router-outlet

Para evitar cambiar la encapsulación predeterminada, escribí un ayudante que agrega estilos globales para el componente:

deepStyle.ts

import { ViewContainerRef } from '@angular/core';

export function deepStyle(vcr: ViewContainerRef, csss: string[]){
    let id = 'deep-' + vcr.element.nativeElement.tagName;
    let styleElement = document.getElementById('pierce-' + vcr.element.nativeElement.name);
    if(!styleElement){
        styleElement = document.createElement('style');
        styleElement.id = id;
        styleElement.innerHTML = csss.map(css => vcr.element.nativeElement.tagName + ' ' + css).join('\n');
        document.head.append(styleElement);
    }
}

my-component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { deepStyle } from '../deepStyle';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
   constructor(vcr: ViewContainerRef) {
    deepStyle(vcr, [`
       img {
         height: 180px;
       }
    `]);
  }
}

resultado:

<head>
...
<style id="deep-MY-COMPONENT">
    MY-COMPONENT img {
      height: 180px;
    }
</style>
...
</head>

Puede utilizar "/ deep /". Es una alternativa :: ng-deep.

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