Angular Academy · Ders

Görünüm Yalıtımı Modları

Emulated, None ve ShadowDom seçeneklerini karşılaştırın.

Görünüm Yalıtımı Modları, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

View Encapsulation Nedir

Görünüm kapsüllemesi, bir bileşenin stillerinin sayfanın geri kalanından nasıl yalıtılacağını denetler. Angular, encapsulation özelliği üzerinden üç kip sunar.

Kipi Ayarlama

Kipi, @Component dekoratöründeki ViewEncapsulation numaralandırmasıyla ayarlayın.

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

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

Emulated (Varsayılan)

Emulated varsayılandır. Angular, yerel Shadow DOM kullanmadan öğelere ve seçicilere benzersiz öznitelikler ekleyerek kapsamlı stilleri taklit eder.

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Emulated Nasıl Çalışır

Emulated kipi, seçicileri oluşturulan özniteliklerle yeniden yazar. Böylece Shadow DOM desteği gerektirmeden tüm tarayıcılarda çalışan bir kapsamlandırma sağlar.

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

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

None

None, kapsüllemeyi tamamen devre dışı bırakır. Bileşen stilleri genel olur ve sayfadaki herhangi bir öğeyi etkileyebilir.

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

None Ne Zaman Kullanılmalı

None kipini dikkatli kullanın; örneğin paylaşılan tema kurallarını tek bir bileşenden tanımlamak için kullanılabilir. Stillerin genel olarak çakışabileceğini unutmayın.

ShadowDom

ShadowDom, bileşen işaretlemesini ve stillerini gerçekten yalıtmak için tarayıcının yerel Shadow DOM özelliğini kullanır.

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

ShadowDom Farkı

ShadowDom ile bileşen gerçek bir gölge kökü içinde oluşturulur. Genel stiller içeri sızamaz, bileşen stilleri de dışarı taşamaz; böylece en güçlü yalıtım sağlanır.

Stil Sızıntılarının Karşılaştırılması

Emulated dışarıya sızıntıyı önler ancak genel stiller yine de öğeleri hedefleyebilir; None hiçbir yalıtım sağlamaz; ShadowDom ise her iki yöndeki geçişi tamamen engeller.

Kip Seçme

Neredeyse her durumda Emulated kipini kullanın. Tamamen yalıtılmış araç parçaları için ShadowDom kullanın; None kipini ise yalnızca bilinçli olarak genel stiller tanımlarken tercih edin.

Kapsülleme ve Genel Stiller

Genel styles.css dosyasının kipten bağımsız olarak her zaman uygulandığını unutmayın; ancak ShadowDom bileşeni içinde genel stiller içeri ulaşamaz.

Hızlı Kontrol

Görünüm kapsüllemesi kipleriyle ilgili anlayışınızı sınayın.

Özet

Angular üç kapsülleme kipi sunar: Emulated (varsayılan, taklit edilmiş kapsamlandırma), None (genel stiller) ve ShadowDom (yerel yalıtım). Emulated çoğu duruma uygundur; ShadowDom ise en güçlü yalıtımı sağlar.

Sıkça Sorulan Sorular

“Görünüm Yalıtımı Modları” dersi ücretsiz mi?

Evet — “Görünüm Yalıtımı Modları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Görünüm Yalıtımı Modları” dersinde ne öğreneceğim?

Emulated, None ve ShadowDom seçeneklerini karşılaştırın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Görünüm Yalıtımı Modları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön