📊 Capítulo 08: CSS Scope & Content Projection
Especialização em Frontend com Angular
🗺️ O Mecanismo de Content Projection Múltiplo com <ng-content>
flowchart TD
PAI["Template do Pai: <app-card>\n <h2 card-header>Título</h2>\n <p card-body>Conteúdo</p>\n</app-card>"]
--> COMP["Componente Card com Slots Declarativos"]
COMP --> S1["<div class='header'><ng-content select='[card-header]' /></div>"]
COMP --> S2["<div class='body'><ng-content select='[card-body]' /></div>"]
style PAI fill:#ede7f6,stroke:#512da8,stroke-width:2px
style COMP fill:#fff3e0,stroke:#ff9800,stroke-width:2px
style S1 fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
style S2 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
🎯 Slide 1: Estratégias de Encapsulamento (ViewEncapsulation)
-
Emulated(Padrão): O Angular adiciona atributos únicos (_ngcontent-c12) aos elementos para isolar o CSS no componente. -
ShadowDom: Utiliza o Shadow DOM nativo do navegador. None: O CSS vaza globalmente para toda a aplicação.
🎯 Slide 2: Pseudo-Classe :host e :host-context
:host {
display: block;
border-radius: 8px;
background-color: var(--card-bg);
&.destaque {
border: 2px solid gold;
}
}
🎯 Slide 3: Fallback em Content Projection
<ng-content select="[card-footer]">
<p class="padrao">Rodapé padrão se nenhum conteúdo for passado!</p>
</ng-content>
🔗 Navegação do Capítulo 08
| 📖 Ler Conteúdo Completo | 🧠 Fazer Quiz | 💻 Ver Exemplos | 🧩 Exercícios |
Slide 1 de 1
Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim