Angular Academy · Lezione

Modalità di incapsulamento della vista

Confronti Emulated, None e ShadowDom.

Modalità di incapsulamento della vista è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cos'è l'incapsulamento della vista

L'incapsulamento della vista controlla come gli stili di un componente vengono isolati dal resto della pagina. Angular offre tre modalità tramite la proprietà encapsulation.

Impostazione della modalità

Imposti la modalità con l'enumerazione ViewEncapsulation nel decoratore @Component.

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

@Component({
  selector: "app-card",
  encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}

Emulated (predefinita)

Emulated è la modalità predefinita. Angular simula gli stili con ambito limitato aggiungendo attributi univoci agli elementi e ai selettori, senza utilizzare il Shadow DOM nativo.

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Come funziona Emulated

La modalità Emulated riscrive i selettori con attributi generati, offrendo un ambito limitato che funziona in tutti i browser senza richiedere il supporto per Shadow DOM.

/* you write */
.title { color: blue; }

/* angular emits */
.title[_ngcontent-xyz] { color: blue; }

None

None disabilita completamente l'incapsulamento. Gli stili del componente diventano globali e possono influire su qualsiasi elemento della pagina.

@Component({
  encapsulation: ViewEncapsulation.None,
  styles: [".title { color: red; }"]
})
// .title now applies app-wide

Quando utilizzare None

Utilizzi None con parsimonia, ad esempio per definire regole di tema condivise da un componente. Presti attenzione, perché gli stili possono entrare in conflitto a livello globale.

ShadowDom

ShadowDom utilizza il Shadow DOM nativo del browser per isolare realmente il markup e gli stili del componente.

@Component({
  selector: "app-widget",
  encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}

Differenze di ShadowDom

Con ShadowDom, il componente viene renderizzato all'interno di una shadow root reale. Gli stili globali non la attraversano e gli stili del componente non fuoriescono, offrendo il massimo livello di isolamento.

Confronto della fuoriuscita degli stili

Emulated impedisce la fuoriuscita degli stili, ma gli stili globali possono comunque selezionare gli elementi; None non offre alcun isolamento; ShadowDom blocca completamente entrambe le direzioni.

Scelta della modalità

Utilizzi Emulated nella maggior parte dei casi. Scelga ShadowDom per widget completamente isolati e None solo per stili globali intenzionali.

Incapsulamento e stili globali

Ricordi che il foglio di stile globale styles.css viene sempre applicato, indipendentemente dalla modalità, tranne all'interno di un componente ShadowDom, dove gli stili globali non arrivano.

Verifica rapida

Verifichi la Sua comprensione delle modalità di incapsulamento della vista.

Riepilogo

Angular offre tre modalità di incapsulamento: Emulated (predefinita, con ambito simulato), None (stili globali) e ShadowDom (isolamento nativo). Emulated è adatta alla maggior parte dei casi; ShadowDom offre il massimo livello di isolamento.

Domande Frequenti

La lezione «Modalità di incapsulamento della vista» è gratuita?

Sì — il testo completo di «Modalità di incapsulamento della vista» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Modalità di incapsulamento della vista»?

Confronti Emulated, None e ShadowDom. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Modalità di incapsulamento della vista»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy