HostとHost-Contextのスタイリング
コンポーネントのホスト要素をスタイル設定します。
「HostとHost-Contextのスタイリング」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
ホスト要素のスタイル設定
コンポーネントは、それ自身のホスト要素（セレクターのタグ）の内部にレンダリングされます。特別な:host疑似クラスを使うと、コンポーネントのCSSからその要素のスタイルを設定できます。
the :hostセレクター
:hostを使うと、コンポーネント自身の要素を対象にできます。たとえば、表示方法や余白を設定できます。
/* card.component.css */
:host {
display: block;
padding: 16px;
}なぜ:hostが必要なのか
:hostがないと、コンポーネント内部からホスト要素のスタイルを設定できません。スコープされたセレクターは、テンプレート内の要素にしか一致しないためです。
:hostと条件指定
:host()にセレクターを渡すと、ホストがその条件に一致する場合に限ってスタイルを設定できます。たとえば、特定のクラスが付いている場合などです。
:host(.active) {
border: 2px solid green;
}
<!-- applies when host has class active -->
<app-card class="active"></app-card>ホストクラスのバインディング
:host()をホストクラスのバインディングと組み合わせると、コンポーネント自身の状態に応じてスタイルを設定できます。
@Component({
selector: "app-card",
host: { "[class.selected]": "isSelected" },
styleUrl: "./card.component.css"
})
export class CardComponent {
isSelected = true;
}the :host-contextセレクター
:host-context()は、ホスト自身ではなく、任意の祖先にある条件に基づいてコンポーネントのスタイルを設定します。テーマ設定に適しています。
:host-context(.dark-theme) {
background: #222;
color: #eee;
}テーマ設定の例
ツリー上位の親要素にdark-themeクラスがある場合、そのルールが適用されます。これにより、1つの祖先要素から内側のコンポーネントの見た目を切り替えられます。
<body class="dark-theme">
<app-card></app-card>
<!-- card uses dark styles -->
</body>:hostと:host-contextの違い
:hostはコンポーネント自身の要素を確認し、:host-contextは祖先要素を確認します。自身の状態にはhostを、テーマなど継承されるコンテキストにはhost-contextを使用してください。
子孫要素との組み合わせ
:host-contextは子孫セレクターと連結して、祖先のコンテキストに基づいて内側の要素のスタイルを設定できます。
:host-context(.compact) .title {
font-size: 12px;
}ホストのdisplayのデフォルト
カスタム要素のホストは、デフォルトではインライン要素です。:hostにdisplay: blockを設定することは、レイアウトを予測どおりに動作させるための一般的な最初のルールです。
:host {
display: block;
}実践的な用途
ホストのスタイル設定を使うと、コンポーネントの外枠を制御したり、自身の状態に反応したり、周囲のテーマクラスに適応したりできます。スタイルのカプセル化を保ちながら、柔軟に対応できます。
クイックチェック
ホストのスタイル設定について理解度を確認しましょう。
まとめ
:hostを使ってコンポーネント自身の要素とその状態のスタイルを設定し、:host-context()を使って祖先要素のクラスにテーマとして反応します。ホストにdisplay: blockを設定することは、便利なデフォルト設定です。
よくある質問
「HostとHost-Contextのスタイリング」レッスンは無料ですか？
はい。「HostとHost-Contextのスタイリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「HostとHost-Contextのスタイリング」で何を学びますか？
コンポーネントのホスト要素をスタイル設定します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「HostとHost-Contextのスタイリング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コンポーネントスコープのスタイル
- ビューカプセル化モード
- HostとHost-Contextのスタイリング
- 動的なクラスとスタイル