Czego użyć zamiast :: ng-deep

Próbuję stylizować element umieszczony przy wylocie routera na kątowy i chcę się upewnić, że wygenerowany element uzyska szerokość 100%

Z większości odpowiedzi wynika, że ​​powinienem użyć ::ng-deepselektora, ale z dokumentów Angulara jest on przestarzały. Czy jest alternatywa dla ::ng-deep?

FWIW W moich badaniach nie znalazłem żadnego zamiennika dla ng-deep ani innych odpowiednich alternatyw. Dzieje się tak, ponieważ, jak sądzę, zespół Angular opiera się na specyfikacji W3C dotyczącej Shadow Dom, która początkowo miała takie selektory jak deep. Jednak od tego czasu W3c usunął zalecenie, ale nie zastąpił go nowym. Dopóki to się nie stanie, wyobrażam sobie, że zespół Angular zachowa ::ng-deepi jego alternatywy będą dostępne, ale w stanie przestarzałym z powodu oczekującego stanu wersji roboczych W3C. Nie jestem teraz w stanie znaleźć dokumentacji, aby to potwierdzić, ale ostatnio to widziałem.

Krótko mówiąc: kontynuuj używanie ::ng-deepi jego alternatywy, dopóki nie zostanie utworzony zamiennik - wycofanie jest tylko wczesnym powiadomieniem, aby ludzie nie byli zaskoczeni, gdy rzeczywista zmiana się zmaterializuje.

- AKTUALIZACJA -

https://drafts.csswg.org/css-scoping-1/ Oto projekt propozycji, jeśli jesteś zainteresowany. Wygląda na to, że pracują nad solidnym zestawem selektorów dla elementów w drzewie cienia; Myślę, że to ta specyfikacja, po zatwierdzeniu, będzie informować klona kątowego, jeśli w ogóle istnieje (tj. angular może nie potrzebować implementować własnych selektorów, gdy zostanie uruchomiona w przeglądarkach).

Aby ominąć przestarzałe ::ng-deep, zwykle wyłączamViewEncapsulation . Chociaż nie jest to najlepsze podejście, dobrze mi służyło.

Aby wyłączyć ViewEncapsulation, wykonaj następujące czynności w swoim komponencie:

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

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

export class HeaderComponent {

}

Spowoduje to, że style .scss w tym komponencie będą globalne dla całej aplikacji. Aby nie pozwolić stylom na przechodzenie w górę łańcucha do komponentów rodzica i rodzeństwa, opakuj cały scss selektorem w następujący sposób:

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

Teraz style określone tutaj zostaną przeniesione do komponentów podrzędnych, więc musisz być bardziej konkretny w swoich selektorach css i zwracać uwagę na swoje p i q podczas dodawania CSS (może dodać selektor potomny określony w aplikacji Angular, a następnie jego style).

Mówię, że nie jest to najlepsze podejście ze względu na powyższy akapit, ale to mi dobrze służyło.

Prostą i łatwą alternatywą dla stylu głębokiego jest styl wspólny wykorzystujący selektor elementu komponentu macierzystego. Więc jeśli masz to w hero-details.component.css:

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

Stałoby się tak w styles.css:

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

Zasadniczo styl głęboki jest stylem niezamkniętym, więc koncepcyjnie wydaje mi się bardziej typowym stylem niż stylem składowym. Osobiście nie używałbym już głębokich stylów. Przełomowe zmiany są normalne w głównych aktualizacjach wersji, a usuwanie przestarzałych funkcji jest uczciwą grą.

Jak ktoś powiedział wcześniej, jeśli korzystasz z biblioteki innej firmy, praktycznie niemożliwe jest uniknięcie konieczności korzystania ::ng-deepz niej od czasu do czasu. Ale co zamierzasz zrobić ze swoimi poprzednimi projektami, gdy ::ng-deepprzeglądarka przestanie być obsługiwana?

Aby być gotowym na ten moment, zasugeruję co następuje:

1. Użyj ViewEncapsulation.None mądrze. Co przekłada się na tylko te komponenty, które muszą mieć dostęp do głębszych komponentów.

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

2. Teraz, aby uniknąć kolizji i dziwności CSS, powinieneś (z reguły) zawsze zawijać szablon komponentu klasą. Tak więc example.component.html powinno wyglądać następująco:

<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. Ponownie, zgodnie z regułą, pierwszy wiersz każdego pliku SCSS będzie dotyczył kontenera komponentów. Ponieważ nie ma enkapsulacji , możesz modyfikować komponent innej firmy, kierując jego klasy. To powiedziawszy, przykład.component.scss powinien wyglądać następująco:

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

Notatka na przyszłość: https://angular.io/guide/component-styles
To powinno być pierwsze miejsce, w którym należy szukać oficjalnych alternatyw / sposobów na to, aby przejść

Nie jest to ogólny zamiennik dla :: ng-deep, ale dla przypadku użycia opisanego przez autora pytania:

W szczególnym przypadku, gdy chcesz stylizować element wstawiony przez gniazdo routera, istnieje eleganckie rozwiązanie wykorzystujące sąsiedni selektor sąsiada w CSS:

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

Dotyczy to wszystkich elementów, które są bezpośrednimi sąsiadami routera.

Więcej informacji:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Możesz użyć „/ deep /”. To :: ng-deep alternatywa.

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