O que usar no lugar de :: ng-deep

Estou tentando estilizar um elemento colocado pela saída do roteador em angular e quero ter certeza de que o elemento gerado terá uma largura de 100%

Pela maioria das respostas, vejo que devo usar o ::ng-deepseletor, mas pelos documentos do Angular ele está sendo descontinuado. Existe uma alternativa para ::ng-deep?

FWIW Em minha pesquisa, não encontrei nenhum substituto para o ng-deep ou outras alternativas aplicáveis. Isso ocorre porque, acredito, a equipe Angular está adiando as especificações do W3C no shadow dom, que inicialmente tinha seletores como deep. No entanto, o W3c removeu a recomendação, mas não a substituiu por uma nova. Até que isso aconteça, imagino que a equipe Angular manterá ::ng-deepe suas alternativas disponíveis, mas em estado obsoleto devido ao estado pendente dos rascunhos do W3C. Não consigo encontrar a documentação para fazer o backup agora, mas eu a vi recentemente.

Resumindo: Continue usando ::ng-deepe suas alternativas até que uma substituição seja criada - a descontinuação é apenas um aviso antecipado para que as pessoas não sejam surpreendidas sempre que a mudança real se materializar.

- ATUALIZAÇÃO -

https://drafts.csswg.org/css-scoping-1/ Aqui está o rascunho da proposta, se você estiver interessado. Parece que eles estão trabalhando em um conjunto robusto de seletores para elementos dentro de uma árvore shadow dom; é essa especificação, uma vez aprovada, que eu acho que informará o clone angular, se houver um (ou seja, o angular pode não precisar implementar seus próprios seletores uma vez que isso vá ao ar nos navegadores).

Para ignorar o obsoleto ::ng-deep, geralmente desativo ViewEncapsulation. Embora essa não seja a melhor abordagem, ela me serviu bem.

Para desativar ViewEncapsulation, faça o seguinte em seu 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 {

}

Isso tornará os estilos .scss neste componente globais para todo o aplicativo. Para não permitir que os estilos subam na cadeia de componentes pai e irmão, envolva todo o scss com o seletor assim:

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

Agora, os estilos especificados aqui irão para os componentes filhos, então você precisa ser mais específico com seus seletores de css e cuidar de seus p's e q's ao adicionar CSS (talvez adicionar o seletor filho especificado em seu aplicativo Angular e então seus estilos).

Eu digo que não é a melhor abordagem por causa do parágrafo acima, mas isso me serviu bem.

A alternativa simples e fácil para um estilo profundo é um estilo comum que usa o seletor de elemento do componente pai. Então, se você tivesse isso em hero-details.component.css:

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

Seria assim em styles.css:

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

Basicamente, um estilo profundo é um estilo não encapsulado, portanto, conceitualmente, parece mais um estilo comum para mim do que um estilo componente. Pessoalmente, eu não usaria mais estilos profundos. Alterações significativas são normais em atualizações de versão principais e a remoção de recursos obsoletos é um jogo justo.

Como alguém disse antes, se você estiver usando uma biblioteca de terceiros, é virtualmente impossível evitar ter que usar de ::ng-deepvez em quando. Mas o que você vai fazer com seus projetos anteriores quando o::ng-deep não mais suportados pelos navegadores?

Para estar pronto para esse momento, vou sugerir o seguinte:

1. Use ViewEncapsulation.None com sabedoria. O que se traduz em apenas para os componentes que precisam acessar componentes mais profundos.

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

2. Agora, para evitar colisões e estranhezas do CSS, você deve (como regra) sempre envolver o template do seu componente com uma classe. Portanto, example.component.html deve 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. Novamente, por regra, a primeira linha de cada arquivo SCSS terá como destino o contêiner do componente. Como não há encapsulamento, você pode modificar o componente de terceiros direcionando suas classes. Dito isso, example.component.scss deve ser como:

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

Uma nota pessoal para o futuro: https://angular.io/guide/component-styles
Esse deve ser o primeiro lugar a olhar para alternativas oficiais / caminhos a seguir

Este não é um substituto geral para :: ng-deep, mas para o caso de uso descrito pelo autor da pergunta:

No caso especial em que você deseja estilizar o elemento inserido por uma saída de roteador, há uma solução elegante usando o seletor vizinho adjacente em CSS:

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

Isso se aplica a todos os elementos que são vizinhos diretos de uma tomada do roteador.

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

Você pode usar "/ deep /". É a alternativa :: ng-deep.

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