:: ng-deepの代わりに使用するもの

ルーターのコンセントによって配置された要素を角度でスタイリングしようとしていますが、生成された要素の幅が100％になるようにします

ほとんどの返信から、::ng-deepセレクターを使用する必要があることがわかりましたが、Angularのドキュメントからは非推奨になっています。に代わるものはあり::ng-deepますか？

FWIW私の調査では、ng-deepやその他の適用可能な代替手段に代わるものは見つかりませんでした。これは、AngularチームがShadow domのW3C仕様を延期しているためdeepです。これには、当初はなどのセレクターがありました。ただし、W3cはその後、推奨事項を削除しましたが、新しい推奨事項に置き換えていません。それが起こるまで、Angularチームは維持し::ng-deep、代替手段を利用できると思いますが、W3Cのドラフトの保留状態のため、非推奨の状態になっています。現在、これをバックアップするためのドキュメントを見つけるのに時間がかかりませんが、最近見ました。

簡単に言う::ng-deepと、代替品が作成されるまで、その代替手段を使い続けてください。実際の変更が実現するたびに人々が盲目的になることがないように、非推奨は単なる早期通知です。

-更新-

https://drafts.c​​sswg.org/css-scoping-1/ 興味があれば、ここにドラフト提案があります。彼らはシャドウDOMツリー内の要素の強力なセレクターのセットに取り組んでいるようです。この仕様が承認されると、Angularクローンが存在する場合でも通知されると思います（つまり、ブラウザーで公開された後、Angularは独自のセレクターを実装する必要がない場合があります）。

非推奨をバイパスするために::ng-deep、私は通常無効にしViewEncapsulationます。これは最善のアプローチではありませんが、私には役立っています。

を無効にするViewEncapsulationには、コンポーネントで次の手順を実行します。

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

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

export class HeaderComponent {

}

これにより、このコンポーネントの.scssスタイルがアプリケーション全体に対してグローバルになります。スタイルが親コンポーネントと兄弟コンポーネントにチェーンを上ることを許可しないようにするには、次のようにセレクターでscss全体をラップします。

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

ここで指定するスタイルは子コンポーネントに分類されるため、CSSセレクターを特に具体的に指定し、CSSを追加するときにpとqに注意する必要があります（Angularアプリで指定した子セレクターを追加してからそのスタイルを追加する場合があります）。

上記の段落のため、これは最善のアプローチではないと言いますが、これは私に役立ちました。

ディープスタイルのシンプルで簡単な代替手段は、親コンポーネントの要素セレクターを使用する一般的なスタイルです。したがって、これがhero-details.component.cssにある場合：

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

styles.cssでは次のようになります。

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

基本的に、ディープスタイルはカプセル化されていないスタイルであるため、概念的には、コンポーネントスタイルというよりも一般的なスタイルのように見えます。個人的にはもうディープスタイルは使いません。メジャーバージョンのアップデートでは重大な変更は正常であり、非推奨の機能の削除は公正なゲームです。

誰かが前に述べたように、サードパーティのライブラリを使用している場合、たまに使用しなければならないことを避けることは事実上不可能::ng-deepです。しかし::ng-deep、ブラウザでサポートされなくなったとき、以前のプロジェクトについてどうしますか？

その瞬間に備えるために、私は次のことを提案します：

1. ViewEncapsulation.Noneを賢く使用してください。これは、より深いコンポーネントにアクセスする必要があるコンポーネントにのみ変換されます。

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

2. さて、衝突とCSSの奇妙さを避けるために、（原則として）常にコンポーネントのテンプレートをクラスでラップする必要があります。したがって、example.component.htmlは次のようになります。

<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. 繰り返しますが、原則として、すべての単一のSCSSファイルの最初の行はコンポーネントコンテナを対象とします。カプセル化がないため、クラスをターゲットにすることでサードパーティコンポーネントを変更できます。そうは言っても、example.component.scssは次のようになります。

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

将来への自己メモ：https：//angular.io/guide/component-styles
それは公式の代替案/ ways-to-goを探す最初の場所でなければなりません

これは:: ng-deepの一般的な置き換えではありませんが、質問の作成者が説明したユースケースの場合です。

router-outletによって挿入された要素のスタイルを設定する特別な場合には、CSSの隣接するネイバーセレクターを使用する洗練されたソリューションがあります。

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

これは、ルーターアウトレットの直接の隣接要素であるすべての要素に適用されます。

参考文献：
https //developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

「/ deep /」を使用できます。:: ng-deepの代替手段です。

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