:Host /deep/
手段:
:Host /deep/ .ui-autocomplete {
width: 85%;
}
emulated
ビューのカプセル化を使用するときに、子コンポーネントのスタイリングを許可するために使用されます。
詳細については、こちらをご覧ください。
https://angular.io/guide/component-styles
ところで/deep/
セレクターは非推奨になりました:
シャドウピアスの子孫コンビネータは廃止され、主要なブラウザとツールからサポートが削除されます。そのため、Angular(/ deep /、>>>、および:: ng-deepの3つすべて)のサポートを削除する予定です。それまでは、:: ng-deepを優先する必要がありますツールとの幅広い互換性。
:Host
は、ホスティング要素のアドレス指定に使用されます。これは、コンポーネントをどこかに追加するために使用するものです(例:<app-component>
)。
:Host擬似クラスセレクターを使用して、コンポーネントをホストする要素のスタイルをターゲットにします(コンポーネントのテンプレート内の要素をターゲットにするのではなく)。
セレクター:Host /deep/ .ui-autocomplete
は、「現在のホスティング要素で、詳細に(子コンポーネントも検索して)クラスui-autocomplete
。
ビューのカプセル化機能に関する追加情報を次に示します。
https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html