Shadow DOM nima?

Shadow DOM veb standart bo‘lib, u DOM va CSS ni komponent ichida inkapsulyatsiya qilish imkonini beradi. U alohida, izolyatsiyalashgan DOM daraxtini, ya'ni "soya daraxti" (shadow tree), yaratadi va asosiy hujjatdagi elementga bog‘lanadi, bu esa "soya ildizi" (shadow root) deb ataladi.

Shadow DOM ning afzalliklari:

• CSS Izolyatsiyasi: Shadow DOM ichida belgilangan uslublar tashqariga "qochmaydi", asosiy hujjatga ta'sir qilmaydi, va odatda, asosiy hujjat uslublari Shadow DOM ga ta'sir qilmaydi.
• DOM Izolyatsiyasi: Shadow DOM tuzilishi asosiy hujjatdan yashirilgan va standart tanlash usullari bilan (masalan, querySelector) kirish mumkin emas.
• JavaScript Izolyatsiyasi: Asosiy hujjatda bajarilayotgan skriptlar, Shadow DOM ichidagi elementlarga oson kirish imkoniga ega emas.
• Qayta ishlatish: Shadow DOM bilan yaratilgan komponentlar, ilovaning boshqa qismlarida yoki hatto boshqa veb-saytlarda oson foydalanish mumkin.

Shadow DOM ni yaratish:

// Shadow DOM ni qo‘shmoqchi bo‘lgan elementni oling
const hostElement = document.getElementById('my-component');

// Shadow Root yarating
// 'open' Shadow DOM ga tashqaridan hostElement.shadowRoot orqali kirishni ta'minlaydi
// 'closed' Shadow DOM ni yashiradi
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOM ichiga elementlar qo‘shamiz
shadowRoot.innerHTML = `
  <style>
    /* Bu komponent uchun xos uslublar */
    h2 {
      color: blue;
    }
  </style>
  <h2>Komponent ichidagi sarlavha</h2>
  <p>Komponent ichidagi paragraf.</p>
`;

Xususiyatlar:

• Slotlar: Shadow DOM ichiga tashqi mazmunni ma'lum joylarga joylashtirish imkonini beradi.
• Shadow Parts: Shadow DOM ichidagi ma'lum elementlarni tashqaridan stilizatsiya qilish imkonini beradi.

Shadow DOM, Web Components (Veb komponentlar) yaratishda asosiy bo‘lak bo‘lib, kuchli inkapsulyatsiya ta'minlaydi, bu esa qayta ishlatiladigan va mustaqil UI elementlarini yaratish uchun zarur.