Shadow DOM – veb komponentlər (Web Components) texnologiyasının əsas hissələrindən biri olan və DOM-un (Document Object Model) "gizli" və izolyasiya olunmuş versiyasını yaratmağa imkan verən texnologiyadır. Bu xüsusiyyət, komponentin içindəki HTML strukturunu və stilini xarici müdaxilədən qoruyur və beləliklə, daha modul, yenidən istifadə oluna bilən, və təhlükəsiz UI komponentləri yaratmağa imkan verir.

Necə işləyir?

Adətən HTML sənədində yazılan bütün elementlər eyni DOM ağacında yerləşir. Bu, o deməkdir ki, stil qaydaları (CSS) və JavaScript hadisələri (event-lər) DOM-un bütün hissələrinə təsir edə bilər. Lakin Shadow DOM istifadə olunduqda, həmin komponent özünəməxsus, "kölgə" DOM-a sahib olur və bu DOM yalnız o komponentin içində işləyir.

Bu texnologiya sayəsində komponentlərdə istifadə olunan CSS stilləri və DOM strukturu xarici təsirlərdən qorunur. Həmçinin, komponentin daxilində baş verən dəyişikliklər başqa yerləri pozmur.

Shadow DOM-un üstünlükləri

• Stil izolyasiyası: Komponentin içindəki CSS qaydaları yalnız həmin komponentə təsir edir və xaricə sızmır.
• DOM izolyasiyası: Xaricdən komponentin DOM strukturu birbaşa dəyişdirilə bilməz.
• Kodun yenidən istifadəsi: Bir dəfə yazılmış Shadow DOM əsaslı komponenti istənilən layihədə təkrar istifadə etmək mümkündür.
• Daha stabil UI: Komponentlər bir-birinə təsir etmədiyi üçün gözlənilməz vizual problemlərin qarşısı alınır.

Sadə nümunə (JavaScript ilə):

const host = document.querySelector("#my-component");

const shadowRoot = host.attachShadow({ mode: "open" });

shadowRoot.innerHTML = `

<style>

p {

color: red;

}

</style>

<p>Bu Shadow DOM içində olan mətndir</p>

`;

Bu nümunədə bir DOM elementi üçün Shadow Root yaradılır və həmin sahədə stil və mətn yerləşdirilir. Xarici səhifədə bu p elementi üçün heç bir CSS qaydası işləməyəcək, çünki o, izolyasiya olunmuş sahədə yerləşir.

Açıq və qapalı rejimlər

Shadow DOM iki rejimdə yaradılır:

• mode: "open" – Shadow DOM JavaScript ilə açıq şəkildə dəyişdirilə bilər.
• mode: "closed" – Shadow DOM JavaScript-dən birbaşa əldə olunmur və komponent daha qapalı qalır.

Nə üçün istifadə olunur?

Shadow DOM əsasən Web Components yaratmaq üçün istifadə olunur. Məsələn, öz date-picker, modal window, dropdown və s. komponentlərinizi hazırlayarkən Shadow DOM sizə digər kodlarla toqquşma olmadan təmiz və idarəolunan komponentlər qurmağa imkan verir.

Nəticə

Shadow DOM – müasir veb inkişafında modul, izolyasiya olunmuş və təkrar istifadə oluna bilən komponentlər yaratmaq üçün əvəzsiz bir vasitədir. O, stil və struktur səviyyəsində tam müstəqillik verərək böyük layihələrdə daha stabil və çevik UI sistemləri qurmağa kömək edir.