Shadow DOM nədir?

Shadow DOM veb standartıdır və HTML, CSS və JavaScript-i əsas sənəddən ayrılmış və izolyasiya olunmuş bloklara kapsülləşdirməyə imkan verir.

Əsas anlayışlar:

• Shadow Host: Shadow DOM-un qoşulduğu DOM elementi.
• Shadow Tree: İzolyasiya olunmuş DOM ağacı.
• Shadow Boundary: Shadow DOM və əsas sənəd arasındakı sərhəd.
• Shadow Root: Shadow Tree-nin kök düyümü. element.attachShadow({ mode: 'open' | 'closed' }) ilə yaradılır:
  • open: Shadow Root xaricdən element.shadowRoot vasitəsilə əlçatan olur.
  • closed: Shadow Root xaricdən əlçatan deyil.

Üstünlüklər:

• Stil kapsülləşməsi: Shadow DOM-da təyin olunan stillər xaricə sızmır və əsas sənədi təsir etmir. Əsas sənədin stilləri standart olaraq Shadow DOM-u təsir etmir, lakin bu idarə oluna bilər.
• DOM kapsülləşməsi: Shadow DOM içindəki elementlər əsas DOM ağacında görünmür, bu da təsadüfi seçicilərin və manipulyasiyaların qarşısını alır.
• Davranış kapsülləşməsi: Logika və hadisə işləyiciləri Shadow DOM-da izolyasiya oluna bilər.

Shadow DOM-un yaradılması nümunəsi:

// Yeni DIV elementi yaradırıq
const hostElement = document.createElement('div');
// Shadow DOM-u elementə əlavə edirik
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOM-a məzmun əlavə edirik
shadowRoot.innerHTML = `
  <style>
    /* Yalnız bu Shadow DOM daxilində tətbiq olunan stil */
    p {
      color: blue;
    }
  </style>
  <p>Bu, Shadow DOM içindəki mətn</p>
`;

// Host elementini əsas sənədə əlavə edirik
document.body.appendChild(hostElement);

Tətbiqlər:

• Yenidən istifadə edilə bilən veb komponentlərin yaradılması.
• Xarici kitabxanaların stillərinin izolyasiyası.
• Komponentin daxili detalları xarici müdaxilələrdən qorunur.

Stil ilə işləyərkən xüsusiyyətlər:

• Xarici stillər standart olaraq Shadow DOM-u təsir etmir.
• :host pseudo-sinfi istifadə edilə bilər, Shadow DOM daxilindən Shadow Host-u stilizə etmək üçün.
• :host-context() istifadə edilə bilər, Shadow Host-un kontekstinə əsasən stil vermək üçün.
• <slot>-a yerləşdirilən elementləri stilizə etmək üçün ::slotted() pseudo-elementindən istifadə edilə bilər.

<my-component>
  <!-- Bu element Shadow DOM daxilindəki slot-a "göndəriləcək" -->
  <span>Slot məzmunu</span>
</my-component>

// my-component komponentinin Shadow DOM daxilində
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* "my-slot" adlı slot-a yerləşdirilmiş element üçün stil */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Komponentin əsas məzmunu</div>
  <slot></slot> <!-- Burada slot məzmunu göstəriləcək -->
`;

Shadow DOM Web Components spesifikasiyasının bir hissəsidir.