Mode Enkapsulasi View
Bandingkan Emulated, None, dan ShadowDom.
Mode Enkapsulasi View adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Apa Itu Enkapsulasi Tampilan
Enkapsulasi tampilan mengatur cara gaya suatu komponen diisolasi dari bagian halaman lainnya. Angular menyediakan tiga mode melalui properti encapsulation.
Mengatur Mode
Atur mode menggunakan enumerasi ViewEncapsulation dalam dekorator @Component.
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-card",
encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}Emulated (Default)
Emulated adalah mode default. Angular menyimulasikan gaya yang dibatasi dengan menambahkan atribut unik ke elemen dan pemilih, tanpa menggunakan ShadowDom bawaan peramban.
@Component({
encapsulation: ViewEncapsulation.Emulated
})Cara Kerja Emulated
Mode Emulated menulis ulang pemilih dengan atribut yang dibuat secara otomatis, sehingga pembatasan gaya dapat berfungsi di semua peramban tanpa persyaratan dukungan ShadowDom.
/* you write */
.title { color: blue; }
/* angular emits */
.title[_ngcontent-xyz] { color: blue; }None
None menonaktifkan enkapsulasi sepenuhnya. Gaya komponen menjadi global dan dapat memengaruhi elemen apa pun di halaman.
@Component({
encapsulation: ViewEncapsulation.None,
styles: [".title { color: red; }"]
})
// .title now applies app-wideKapan Menggunakan None
Gunakan None secara terbatas, misalnya untuk menetapkan aturan tema bersama dari satu komponen. Waspadalah karena gaya dapat saling berbenturan secara global.
ShadowDom
ShadowDom menggunakan ShadowDom bawaan peramban untuk benar-benar mengisolasi markup dan gaya komponen.
@Component({
selector: "app-widget",
encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}Perbedaan ShadowDom
Dengan ShadowDom, komponen dirender di dalam akar bayangan yang nyata. Gaya global tidak dapat menembus ke dalam, dan gaya komponen tidak merembes ke luar, sehingga menghasilkan isolasi terkuat.
Perbandingan Kebocoran Gaya
Emulated mencegah kebocoran ke luar, tetapi gaya global masih dapat menargetkan elemen; None tidak memiliki isolasi; ShadowDom sepenuhnya memblokir kedua arah.
Memilih Mode
Gunakan Emulated untuk hampir semua kebutuhan. Gunakan ShadowDom untuk widget yang sepenuhnya terisolasi dan None hanya untuk gaya global yang memang disengaja.
Enkapsulasi dan Gaya Global
Ingat, styles.css global selalu berlaku, apa pun modenya, kecuali di dalam komponen ShadowDom, tempat gaya global tidak dapat menjangkau.
Pemeriksaan Singkat
Uji pemahaman Anda tentang mode enkapsulasi tampilan.
Rangkuman
Angular menyediakan tiga mode enkapsulasi: Emulated (default, pembatasan yang disimulasikan), None (gaya global), dan ShadowDom (isolasi bawaan). Emulated cocok untuk sebagian besar kasus; ShadowDom memberikan isolasi terkuat.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mode Enkapsulasi View” gratis?
Ya — teks lengkap “Mode Enkapsulasi View” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mode Enkapsulasi View”?
Bandingkan Emulated, None, dan ShadowDom. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Mode Enkapsulasi View” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Gaya dengan Cakupan Komponen
- Mode Enkapsulasi View
- Gaya Host dan Host-Context
- Kelas dan Gaya Dinamis