Shadow DOM İçinde CSS Değişkenlerinin (Custom Properties) Davranışı: Beklenmedik Erişim Kuralları
Giriş
Sorun: Web component’ler geliştirirken, CSS değişkenleri (custom properties) ile birlikte Shadow DOM’un özel yapısına takılırız. Çoğu geliştirici, bir değişkenin sorunsuz inheritance (kalıtım) ile “herkese” yayılacağını varsayar – ama Shadow DOM bu varsayımı kırıyor.
Makine Parçası
Shadow DOM’un temel özellikleri
CSS Değişkenleri: Custom Properties
Gizli Kurallar
1. **Shadow Root’un “--root” alanı** dışarıdan okunamıyor.
2. **Bir değişkeni “:host” içinde tanımlarsanız**, bu değer yalnızca aynı shadow root içinde erişilebilir. Diğer tarafta aynı değişken adı kullanılırsa tarayıcı, *doğrudan* o shadow tree’in köküne bakar.
3. **Bağlam**: Shadow boundary, *üzerinden* geçen (`inherit`) değişkenleri izole eder. Fakat `var(--x)` değeri, eğer bulunamazsa `fallback` ile tekrar standa dönülür.
Kod Örneği
Kod:
/*-Light DOM--------------------*/
html {
--ana-harf: #ff5722;
}
/*Component definition---------------*/
class MyButton extends HTMLElement {
constructor(){
super();
const shadow = this.attachShadow({mode:'open'});
shadow.innerHTML = `
<style>
button{color:var(--ana-harf);}
</style>
<button>Click Me!</button>
`;
}
}
customElements.define('my-btn',MyButton);
/*-------------------------------*/
</code>
[b]Yapılması Gerekenler[/b]
- Bilinçli **fallback** kullanın: `var(--ana-harf, #000);`
- Shadow DOM’a spesifik bir bağlam tanımlayın: `:host{--ana-harf: #3c9;}`
- Global değişkenden farklı isimler seçerek **karışıklığı** önleyin.
[b]Sonuç—İşlevsel Yüzey Relationalı[/b]
[b]Özetle:[/b] Shadow DOM içinde CSS değişkenleri, “encode” gibi bir şifreleme mekaniği gibidir: Değişkenlerin güçlü, ama belirli sınırlar içinde süper erişebilirliğine sahip olduğu anlaşılıyor. Açık bir API ile beklenen kalıtım davranışını yeniden formüle etmek, component tasarımında yeni bir `@apply` gücüne dönüştürür.
[b]Pratik Öneri[/b]
1. İsimlendirme, popüler CSS kütüphanelerini taklit etmemeli.
2. Shadow boundary aeriçinde “mutation observer” kullanarak, değişken değişikliklerini loglayın – bu, tasarım sistemlerinde “görünmeyen bakış” sağlar.
[center][b]Dikkatli kalın ve komponentlerinizi izole tutun![/b][/center]
