Shadow DOM İzolasyonu
Tasarımınız kutsaldır, biz bozmuyoruz.
Çerez banner'ı sitenize eklendiğinde CSS'inizin bozulması, butonların kayması veya yazı tiplerinin değişmesi... Bu sorunları yaşadıysanız sebebi Shadow DOM kullanılmamasıdır.
Veribenim banner'ı tamamen izole bir Shadow Root içinde çalışır. İki CSS evreni birbirini asla etkilemez.
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
Shadow DOM olmadan yaşanan sorunlar artık tarih.
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.