Componentler isteğe bağlı olarak, o bileşenin DOM’una uygulanan CSS stillerini içerebilir:
@Component({
selector: 'profile-photo',
template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
styles: ` img { border-radius: 50%; } `,
})
export class ProfilePhoto { }Ayrı dosyalarda stillerinizi yazmayı da seçebilirsiniz:
@Component({
selector: 'profile-photo',
templateUrl: 'profile-photo.html',
styleUrl: 'profile-photo.css',
})
export class ProfilePhoto { }Angular bileşeniniz derlendikçe, bu stiller Componentlerin JavaScript çıktısı ile birlikte yayınlanır. Bu, bileşen stillerinin JavaScript modül sisteminde yer aldığı anlamına gelir. Bir Angular Componenti render ettiğinizde, framework otomatik olarak ilişkili stilleri dahil eder, hatta bir bileşeni lazy-loading yaptığınızda bile.
Style kapsamı #
Her componentin , framework bir bileşenin stillerini nasıl kapsadığını belirleyen bir görünüm encapsulation ayarı vardır. Üç görünüm encapsulation modu vardır: Emulated, ShadowDom ve None. Modu @Component dekoratöründe belirtebilirsiniz:
ViewEncapsulation.Emulated #
Angular, varsayılan olarak encapsulation taklit eder, böylece bir componentin stilleri yalnızca o componentin şablonunda tanımlanan öğelere uygulanır. Bu modda, framework her bileşen örneği için benzersiz bir HTML özniteliği oluşturur, bu özniteliği componentin şablonundaki öğelere ekler ve bu özniteliği componentin stillerinde tanımlanan CSS seçicilere ekler.
Bu mod, bir componentin stillerinin sızıp diğer componenti etkilemesini önler. Bununla birlikte, component dışında tanımlanan global stiller hala encapsulation edilmiş kapsam ile bir componentim içindeki öğeleri etkileyebilir.
Angular, encapsulation edilmiş modda, Shadow DOM kullanmadan :host ve :host-context yalancı sınıflarını destekler. Derleme sırasında, çerçeve bu yalancı sınıfları özniteliklere dönüştürür. Angular’ın encapsulation edilmiş kapsülleme modu, ::shadow veya ::part gibi Shadow DOM ile ilgili diğer yalancı sınıfları desteklemez.
::ng-deep #
Angular’ın öykünmeli encapsulation modu, :ng-deep adında özel bir sözde sınıfı destekler. Bu sözde sınıfın bir CSS kuralına uygulanması, o kural için encapsulation devre dışı bırakarak kuralı etkili bir şekilde global bir stile dönüştürür. Angular ekibi ::ng-deep’in yeni kullanımını kesinlikle önermez. Bu API’ler yalnızca geriye dönük uyumluluk içindir.
ViewEncapsulation.ShadowDom #
Bu mod, web standardı Shadow DOM API’sini kullanarak bir bileşen içindeki stilleri kapsar. Bu mod etkinleştirildiğinde, Angular bileşenin ana öğesine bir gölge kökü ekler ve bileşenin şablonunu ve stillerini ilgili gölge ağacında oluşturur.
Bu mod, bileşenin şablonundaki öğelere yalnızca o bileşenin stillerinin uygulanacağını kesin olarak garanti eder. Global stiller gölge ağacındaki öğeleri etkileyemez ve gölge ağacının içindeki stiller gölge ağacının dışındaki öğeleri etkileyemez.
Ancak ShadowDom encapsulation etkinleştirmek, stil kapsamından daha fazlasını etkiler. Bileşenin bir gölge ağaçta oluşturulması olay yayılımını, API ile etkileşimi ve tarayıcı geliştirici araçlarının öğeleri nasıl gösterdiğini etkiler. Bu seçeneği etkinleştirmeden önce uygulamanızda Shadow DOM kullanmanın tüm sonuçlarını her zaman anlayın.
ViewEncapsulation.None #
Bu mod, bileşen için tüm stil kapsüllemesini devre dışı bırakır. Bileşenle ilişkili tüm stiller global stiller gibi davranır.
Şablonlarda stil tanımlama #
Ek stiller tanımlamak için bir bileşenin şablonundaki <style> öğesini kullanabilirsiniz. Bileşenin görünüm kapsülleme modu, bu şekilde tanımlanan stiller için geçerlidir.
Angular, stil öğelerinin içindeki bağlamaları desteklemez.
Harici stil dosyalarına başvurma #
Bileşen şablonları CSS dosyalarına referans vermek için <link> öğesini kullanabilir. Ek olarak, CSS’niz CSS dosyalarına referans vermek için @importat-kuralını kullanabilir. Angular bu referansları harici stiller olarak değerlendirir. Harici stiller, öykünülmüş görünüm kapsüllemesinden etkilenmez.
