Shadow DOM nima?

Shadow DOM — bu, veb standartidir, komponent ichida DOM daraxtini va uslublarni inkapsulyatsiya qilish imkonini beradi va ularni hujjatning qolgan qismidan ajratib turadi.

Asosiy tushunchalar:

• Shadow tree: o'ziga xos DOM daraxti, elementga ulanadi.
• Shadow boundary: Shadow DOM va asosiy hujjatni ajratadigan chegarasi.
• Shadow host: Shadow DOM ulanadigan element.
• Shadow root: Shadow daraxtining ildiz tuguni.

Afzalliklar:

• Stil izolyatsiyasi: Shadow DOM ichida belgilangan uslublar tashqaridagi elementlarga ta'sir qilmaydi va aksincha.
• DOM izolyatsiyasi: Shadow DOM ichidagi DOM tuzilishi ko'rinmaydi va to'g'ridan-to'g'ri asosiy hujjatdan kirish mumkin emas, bu ID va sinflar bilan muvofiqlikni oldini oladi.
• Kapsulyatsiya: modulli va qayta ishlatiladigan komponentlar yaratadi.

Shadow DOM yaratish:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // rejim: 'open' - JavaScript orqali kirish mumkin; 'closed' - mumkin emas

shadowRoot.innerHTML = `
  <style>
    /* Bu Shadow DOM uchun uslublar */
    p {
      color: blue;
    }
  </style>
  <p>Bu, Shadow DOM mazmuni</p>
`;