Apa yang harus digunakan sebagai pengganti :: ng-deep

Saya mencoba menata elemen yang ditempatkan oleh outlet router dalam sudut dan ingin memastikan bahwa elemen yang dihasilkan mendapat lebar 100%

Dari sebagian besar balasan, saya melihat bahwa saya harus menggunakan ::ng-deeppemilih, tetapi dari dokumen Angular sudah tidak digunakan lagi. Apakah ada alternatif lain ::ng-deep?

FWIW Dalam penelitian saya, saya belum menemukan pengganti ng-deep atau alternatif lain yang berlaku. Ini karena, saya yakin, tim Angular menunda spesifikasi W3C pada shadow dom, yang awalnya memiliki penyeleksi seperti deep. Namun, W3c telah menghapus rekomendasi tersebut, tetapi tidak menggantinya dengan yang baru. Sampai itu terjadi, saya membayangkan bahwa tim Angular akan tetap ::ng-deepdan alternatifnya tersedia, tetapi dalam keadaan usang karena rancangan W3C yang tertunda. Saya tidak dapat meluangkan waktu untuk menemukan dokumentasi untuk mendukung ini sekarang tetapi saya melihatnya baru-baru ini.

Singkat cerita: Tetap gunakan ::ng-deepdan alternatifnya sampai penggantinya dibuat - penghentian hanya pemberitahuan awal sehingga orang tidak dibutakan setiap kali perubahan aktual terwujud.

- PEMBARUAN -

https://drafts.csswg.org/css-scoping-1/ Berikut adalah draf proposal jika Anda tertarik. Tampaknya mereka sedang mengerjakan satu set penyeleksi yang kuat untuk elemen dalam pohon dom bayangan; itu adalah spesifikasi ini, setelah disetujui, yang menurut saya akan menginformasikan klon sudut, jika bahkan ada satu (yaitu sudut mungkin tidak perlu menerapkan penyeleksi mereka sendiri setelah ini ditayangkan di browser).

Untuk melewati yang tidak digunakan lagi ::ng-deep, saya biasanya menonaktifkan ViewEncapsulation. Meskipun ini bukan pendekatan terbaik, ini telah membantu saya dengan baik.

Untuk menonaktifkan ViewEncapsulation, lakukan hal berikut di komponen Anda:

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

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

export class HeaderComponent {

}

Ini akan membuat gaya .scss dalam komponen ini global ke seluruh aplikasi. Agar gaya tidak naik rantai ke komponen induk dan saudara, bungkus seluruh scss dengan selektor seperti ini:

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

Sekarang, gaya yang ditentukan di sini akan turun ke komponen anak-anak sehingga Anda harus ekstra spesifik dengan pemilih css dan memperhatikan p dan q Anda saat menambahkan CSS (mungkin tambahkan pemilih anak yang ditentukan dalam aplikasi Angular Anda dan kemudian gayanya).

Saya mengatakan ini bukan pendekatan terbaik karena paragraf di atas, tetapi ini telah membantu saya dengan baik.

Alternatif sederhana dan mudah untuk gaya dalam adalah gaya yang umum menggunakan pemilih elemen dari komponen induk. Jadi jika Anda memiliki ini di hero-details.component.css:

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

Ini akan menjadi seperti ini di styles.css:

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

Pada dasarnya gaya dalam adalah gaya yang tidak dikemas sehingga secara konseptual tampak lebih seperti gaya yang umum bagi saya daripada gaya komponen. Secara pribadi saya tidak akan menggunakan gaya dalam lagi. Perubahan yang merusak adalah hal yang normal dalam pembaruan versi utama dan penghapusan fitur yang tidak berlaku lagi adalah hal yang wajar.

Seperti yang dikatakan seseorang sebelumnya, jika Anda menggunakan pustaka pihak ketiga, hampir tidak mungkin untuk menghindari penggunaan ::ng-deepsesekali. Tapi apa yang akan Anda lakukan tentang proyek Anda sebelumnya ketika ::ng-deeptidak lagi didukung oleh browser?

Untuk bersiap menghadapi momen itu saya akan menyarankan yang berikut:

1. Gunakan ViewEncapsulation.None dengan bijak. Yang diterjemahkan menjadi hanya untuk komponen-komponen yang perlu mengakses komponen yang lebih dalam.

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

2. Sekarang, untuk menghindari benturan dan keanehan CSS Anda harus (sebagai aturan) selalu membungkus template komponen Anda dengan sebuah kelas. Jadi, example.component.html harus seperti:

<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. Sekali lagi, menurut aturan, baris pertama dari setiap file SCSS akan menargetkan penampung komponen. Karena tidak ada Enkapsulasi, Anda dapat mengubah komponen pihak ketiga dengan menargetkan kelas mereka. Karena itu, example.component.scss harus seperti:

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

Ini bukan pengganti umum untuk :: ng-deep, tetapi untuk kasus penggunaan yang dijelaskan oleh penulis pertanyaan:

Dalam kasus khusus di mana Anda ingin memberi gaya pada elemen yang dimasukkan oleh outlet-router, ada solusi elegan dengan menggunakan selektor tetangga yang berdekatan di CSS:

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

Ini akan berlaku untuk semua elemen yang merupakan tetangga langsung dari outlet router.

Bacaan lebih lanjut:
https://developer.mozilla.org/en-US/docs/Web/CSS/Ad
Berdekatan_sibling_combinator https://angular.io/guide/router#router-outlet

Untuk menghindari mengubah enkapsulasi default, saya menulis pembantu yang menambahkan gaya global untuk komponen:

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;
       }
    `]);
  }
}

hasil:

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

Anda dapat menggunakan "/ deep /". Ini :: alternatif yang mendalam.

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