Shadow DOM İzolasyonu
Banner sitenizin tasarımına karışmasın.
Çerez banner'ı eklendikten sonra butonlar kayıyor, yazı tipi değişiyor veya mobil görünüm bozuluyorsa sorun genelde stil çakışmasıdır.
Veribenim banner'ı izole bir alanda çalışır. Böylece sitenizin stilleri banner'ı, banner da sitenizi bozmaz.
DOM Ağacı
<html>
<head>
<style> /* sitenin CSS'i */ </style>
</head>
<body>
<!-- sitenizin içeriği -->
<div id="vbn-root">
#shadow-root (closed)
<style> /* banner CSS — izole */ </style>
<div class="vbn-banner"> ... </div>
</div>
</body>
</html>
Banner ve site CSS'i birbirinden tamamen izole
İzolasyonun Getirdikleri
Banner, sayfanın mevcut düzeniyle kavga etmeden çalışır.
CSS Çakışması Yok
Sitenizde !important ile dolu bir CSS framework kullansanız da, banner'ın rengi, boyutu veya düzeni asla etkilenmez.
Layout Shift Yok
Banner Shadow Root içinde float ettiğinden sitenizin akış düzenini değiştirmez. CLS (Cumulative Layout Shift) skoru sıfır.
JS İzolasyonu
window scope'u kirletmez. Global değişken çakışması imkânsız. Sitenizin diğer scriptleri banner'ı etkileyemez.
Framework Bağımsız
Bootstrap, Tailwind, Material UI, Ant Design — hangi CSS framework'ü kullanırsanız kullanın, banner stili korunur.
Dışarıdan Erişim Kapalı
Shadow Root 'closed' modda açılır. Üçüncü taraf scriptlerin banner DOM'una erişimi engellenir.
Scoped Animations
Banner'ın giriş/çıkış animasyonları yalnızca kendi scope'unda çalışır, sitenizin animasyonlarını tetiklemez.
Teknik Uygulama
Web Components standardının bir parçası olan Shadow DOM, DOM elementlerinin kendi izole scope'larında yaşamasını sağlar. Veribenim bu standardı attachShadow({ mode: 'closed' }) ile kullanır.
Modern tüm tarayıcılarda (Chrome 53+, Firefox 63+, Safari 10+, Edge 79+) tam destek mevcuttur. IE için polyfill kullanılmaz — IE zaten tüm büyük KVKK araçları tarafından desteklenmemektedir.
Shadow Root içindeki CSS, dış CSS'den tamamen bağımsız bir cascade zinciri oluşturur. Bu sayede :root üzerindeki CSS variable'lar bile shadow içine sızmaz — banner her zaman tutarlı görünür.