Shadow DOM nədir?

Shadow DOM veb standartdır və veb komponent daxilində DOM və CSS-in inkapsulyasiyasına imkan verir. O, ayrılmış və izolyasiya olunmuş DOM ağacı, yəni "kölgə ağacı" (shadow tree), yaradır və əsas sənəddəki elementə qoşulur, buna "kölgə kökü" (shadow root) deyilir.

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

• CSS İzolyasiyası: Shadow DOM daxilində müəyyən edilmiş stillər "sızmır" və xaricə, əsas sənədə təsir etmir, və standart olaraq, əsas sənəddən gələn stillər Shadow DOM-u təsir etmir.
• DOM İzolyasiyası: Shadow DOM strukturu əsas sənəddən gizlidir və standart seçim metodları ilə (məsələn, querySelector) əlçatan deyil.
• JavaScript İzolyasiyası: Əsas sənəddə işləyən skriptlər, Shadow DOM daxilindəki elementlərə asanlıqla daxil ola bilməz.
• Təkrar istifadə: Shadow DOM ilə yaradılmış komponentlər, tətbiqin digər hissələrində və ya digər veb saytlarında asanlıqla istifadə oluna bilər.

Shadow DOM-un yaradılması:

// Shadow DOM-u əlavə etmək istədiyiniz elementi əldə edin
const hostElement = document.getElementById('my-component');

// Shadow Root yaradın
// 'open' Shadow DOM-un xaricdən hostElement.shadowRoot vasitəsilə əlçatan olmasını təmin edir
// 'closed' Shadow DOM-u gizlədir
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOM daxilində elementlər əlavə edin
shadowRoot.innerHTML = `
  <style>
    /* Bu komponent üçün xüsusi stillər */
    h2 {
      color: blue;
    }
  </style>
  <h2>Komponent daxilində başlıq</h2>
  <p>Komponent daxilində paraqraf.</p>
`;

Xüsusiyyətlər:

• Slotlar: Shadow DOM daxilində xarici məzmunu müəyyən yerlərə yerləşdirməyə imkan verir.
• Shadow Parts: Shadow DOM daxilində müəyyən elementləri xaricdən stilizə etməyə imkan verir.

Shadow DOM, Web Components (Veb komponentlər) yaratmaq üçün əsas komponentdir və güclü inkapsulyasiya təmin edir, bu da təkrar istifadə edilə bilən və öz-özünə yetərli UI elementləri yaratmaq üçün vacibdir.