Styles de l’hôte et du contexte de l’hôte
Appliquez un style à l’élément hôte du composant.
Styles de l’hôte et du contexte de l’hôte est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Styliser l’élément hôte
Un composant est rendu à l’intérieur de son propre élément hôte (la balise correspondant à son sélecteur). La pseudo-classe spéciale :host vous permet de styliser cet élément depuis le CSS du composant.
Le sélecteur :host
Utilisez :host pour cibler l’élément propre au composant, par exemple pour lui définir un affichage et des espacements.
/* card.component.css */
:host {
display: block;
padding: 16px;
}Pourquoi :host est nécessaire
Sans :host, vous ne pouvez pas styliser l’élément hôte depuis l’intérieur du composant, car les sélecteurs limités au composant ne correspondent qu’aux éléments du modèle.
:host avec une condition
Vous pouvez transmettre un sélecteur à :host() pour ne styliser l’hôte que lorsqu’il lui correspond, par exemple lorsqu’il possède une classe.
:host(.active) {
border: 2px solid green;
}
<!-- applies when host has class active -->
<app-card class="active"></app-card>Liaison d’une classe de l’hôte
Combinez :host() avec une liaison de classe de l’hôte pour styliser le composant en fonction de son propre état.
@Component({
selector: "app-card",
host: { "[class.selected]": "isSelected" },
styleUrl: "./card.component.css"
})
export class CardComponent {
isSelected = true;
}Le sélecteur :host-context
:host-context() stylise le composant en fonction d’une condition sur n’importe quel ancêtre, et non sur l’hôte lui-même. Il est idéal pour les thèmes.
:host-context(.dark-theme) {
background: #222;
color: #eee;
}Exemple de thème
Si un parent situé plus haut dans l’arbre possède la classe dark-theme, la règle s’applique et permet à un ancêtre de modifier l’apparence des composants imbriqués.
<body class="dark-theme">
<app-card></app-card>
<!-- card uses dark styles -->
</body>:host ou :host-context
:host vérifie l’élément propre au composant ; :host-context vérifie les ancêtres. Utilisez host pour l’état propre au composant et host-context pour un contexte hérité, comme les thèmes.
Combiner avec des descendants
Vous pouvez enchaîner :host-context avec des sélecteurs descendants pour styliser les éléments internes en fonction du contexte d’un ancêtre.
:host-context(.compact) .title {
font-size: 12px;
}Affichage par défaut de l’hôte
Par défaut, les hôtes d’éléments personnalisés sont en ligne. Définir display: block sur :host est une première règle courante qui permet au positionnement de se comporter de manière prévisible.
:host {
display: block;
}Utilisations pratiques
Utilisez le style de l’hôte pour contrôler le cadre extérieur d’un composant, réagir à son propre état et vous adapter aux classes de thème environnantes, tout en conservant des styles encapsulés mais flexibles.
Vérification rapide
Vérifiez votre compréhension du style de l’hôte.
Récapitulatif
Utilisez :host pour styliser l’élément propre au composant et son état, et :host-context() pour réagir aux classes des ancêtres et gérer les thèmes. Définir display: block sur l’hôte constitue une valeur par défaut utile.
Questions Fréquemment Posées
La leçon « Styles de l’hôte et du contexte de l’hôte » est-elle gratuite ?
Oui — le texte complet de « Styles de l’hôte et du contexte de l’hôte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Styles de l’hôte et du contexte de l’hôte » ?
Appliquez un style à l’élément hôte du composant. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Styles de l’hôte et du contexte de l’hôte » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Styles limités au composant
- Modes d’encapsulation de la vue
- Styles de l’hôte et du contexte de l’hôte
- Classes et styles dynamiques