Shadow DOM nədir?

Shadow DOM — bu, veb standartıdır və komponent daxilində DOM ağacını və üslubları inkapsulyasiya etməyə və onları sənədin qalan hissəsindən ayırmağa imkan verir.

Əsas anlayışlar:

• Shadow tree: Öz DOM ağacı, elementə qoşulmuşdur.
• Shadow boundary: Shadow DOM ilə əsas sənəd arasında sərhəd.
• Shadow host: Shadow DOM-un qoşulduğu element.
• Shadow root: Shadow ağacının kök düyünü.

Üstünlüklər:

• Stil izolyasiyası: Shadow DOM daxilində təyin olunan üslublar onun xaricindəki elementlərə təsir etmir və əksinə.
• DOM izolyasiyası: Shadow DOM daxilində DOM strukturu görünmür və birbaşa əsas sənəddən əlçatan deyil, bu da id və sinif konfliktlərinin qarşısını alır.
• Kapsülləmə: modulyar və çox istifadə olunan komponentlər yaradır.

Shadow DOM-un yaradılması:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // rejim: 'open' - JavaScript vasitəsilə əlçatan; 'closed' - yox

shadowRoot.innerHTML = `
  <style>
    /* Bu Shadow DOM üçün üslublar */
    p {
      color: blue;
    }
  </style>
  <p>Bu, Shadow DOM-un məzmunudur</p>
`;