Was anstelle von :: ng-deep zu verwenden ist

Ich versuche, ein vom Router-Ausgang platziertes Element in einem Winkel zu gestalten und möchte sicherstellen, dass das generierte Element eine Breite von 100% erhält

Aus den meisten Antworten geht hervor, dass ich den ::ng-deepSelektor verwenden sollte, aber aus Angulars Dokumenten wird er nicht mehr empfohlen. Gibt es eine Alternative zu ::ng-deep?

FWIW In meiner Forschung habe ich keinen Ersatz für ng-deep oder die anderen anwendbaren Alternativen gefunden. Dies liegt daran, dass das Angular-Team meines Erachtens auf die W3C-Spezifikation für den Schattendom zurückgreift, für die ursprünglich Selektoren wie z deep. Der W3c hat die Empfehlung jedoch inzwischen entfernt, aber nicht durch eine neue ersetzt. Bis dahin stelle ich mir vor, dass das Angular-Team ::ng-deepdie verfügbaren Alternativen beibehalten und verfügbar machen wird, jedoch aufgrund des anstehenden Zustands der W3C-Entwürfe in einem veralteten Zustand. Ich kann mir momentan nicht die Zeit nehmen, die Dokumentation zu finden, um dies zu sichern, aber ich habe sie kürzlich gesehen.

Lange Rede, kurzer Sinn: Verwenden Sie ::ng-deepund seine Alternativen weiter, bis ein Ersatz erstellt wird - die Abwertung ist nur eine frühe Benachrichtigung, damit die Leute nicht blind sind, wenn die tatsächliche Änderung eintritt.

- UPDATE -

https://drafts.csswg.org/css-scoping-1/ Hier ist der Entwurf des Vorschlags, wenn Sie interessiert sind. Es scheint, dass sie an einem robusten Satz von Selektoren für Elemente innerhalb eines Schattendom-Baums arbeiten. Es ist diese Spezifikation, die nach ihrer Genehmigung den Winkelklon informiert, falls es überhaupt eine gibt (dh Winkel muss möglicherweise keine eigenen Selektoren implementieren, sobald diese in Browsern verfügbar sind).

Um das Veraltete zu umgehen ::ng-deep, deaktiviere ich normalerweise ViewEncapsulation. Obwohl dies nicht der beste Ansatz ist, hat er mir gute Dienste geleistet.

Gehen Sie zum Deaktivieren ViewEncapsulationin Ihrer Komponente wie folgt vor:

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

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

export class HeaderComponent {

}

Dadurch werden die .scss-Stile in dieser Komponente für die gesamte Anwendung global. Um nicht zuzulassen, dass die Stile die Kette zu übergeordneten und geschwisterlichen Komponenten hinaufgehen, wickeln Sie den gesamten scss wie folgt mit dem Selektor ein:

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

Die hier angegebenen Stile werden nun auf untergeordnete Komponenten übertragen, sodass Sie beim Hinzufügen von CSS besonders auf Ihre CSS-Selektoren achten und auf Ihre Ps und Qs achten müssen (fügen Sie möglicherweise die in Ihrer Angular-App angegebene untergeordnete Auswahl und dann deren Stile hinzu).

Ich sage, es ist aufgrund des obigen Absatzes nicht der beste Ansatz, aber das hat mir gute Dienste geleistet.

Die einfache Alternative zu einem tiefen Stil ist ein gängiger Stil, bei dem die Elementauswahl der übergeordneten Komponente verwendet wird. Also, wenn Sie dies in hero-details.component.css hatten:

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

Es würde dies in styles.css werden:

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

Grundsätzlich ist ein tiefer Stil ein nicht gekapselter Stil, daher scheint er mir konzeptionell eher ein allgemeiner Stil als ein Komponentenstil zu sein. Persönlich würde ich keine tiefen Stile mehr verwenden. Brechende Änderungen sind bei wichtigen Versionsaktualisierungen normal und das Entfernen veralteter Funktionen ist ein faires Spiel.

Wie bereits erwähnt, ist es bei Verwendung einer Bibliothek eines Drittanbieters praktisch unmöglich, die gelegentliche Verwendung zu vermeiden ::ng-deep. Aber was machen Sie mit Ihren vorherigen Projekten, wenn diese ::ng-deepvon Browsern nicht mehr unterstützt werden?

Um für diesen Moment bereit zu sein, werde ich Folgendes vorschlagen:

1. Verwenden Sie ViewEncapsulation.None mit Bedacht. Dies gilt nur für diejenigen Komponenten, die auf tiefere Komponenten zugreifen müssen.

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

2. Um Kollisionen und CSS-Verrücktheiten zu vermeiden, sollten Sie die Vorlage Ihrer Komponente (in der Regel) immer mit einer Klasse umschließen. Beispiel.component.html sollte also wie folgt aussehen:

<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. Wiederum zielt die erste Zeile jeder einzelnen SCSS-Datei in der Regel auf den Komponentencontainer ab. Da es keine Kapselung gibt, können Sie die Komponente eines Drittanbieters ändern, indem Sie auf deren Klassen abzielen. Das heißt, example.component.scss sollte wie folgt aussehen:

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

Eine Selbstnotiz für die Zukunft: https://angular.io/guide/component-styles
Dies sollte der erste Ort sein, an dem nach offiziellen Alternativen / Wegen gesucht werden kann

Dies ist kein allgemeiner Ersatz für :: ng-deep, sondern für den vom Fragesteller beschriebenen Anwendungsfall:

In dem speziellen Fall, in dem Sie das von einem Router-Ausgang eingefügte Element formatieren möchten, gibt es eine elegante Lösung, die den Selektor für benachbarte Nachbarn in CSS verwendet:

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

Dies gilt für alle Elemente, die direkte Nachbarn einer Router-Steckdose sind.

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

Sie können "/ deep /" verwenden. Es ist :: ng-tiefe Alternative.

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