Shadow DOM nima?

Shadow DOM — bu veb standart, u yordamida HTML, CSS va JavaScriptni asosiy hujjatdan ajratilgan va izolyatsiya qilingan bloklarga kapsüllash mumkin.

Asosiy tushunchalar:

• Shadow Host: Shadow DOM qoʻshilgan DOM element.
• Shadow Tree: Izolyatsiya qilingan DOM daraxti.
• Shadow Boundary: Shadow DOM va asosiy hujjat oʻrtasidagi chegarasi.
• Shadow Root: Shadow Tree ning ildiz tuguni. element.attachShadow({ mode: 'open' | 'closed' }) yordamida yaratiladi:
  • open: Shadow Root tashqaridan element.shadowRoot orqali kirish mumkin.
  • closed: Shadow Root tashqaridan kirish mumkin emas.

Afzalliklar:

• Stil kapsüllash: Shadow DOMda belgilangan uslublar tashqariga oqmaydi va asosiy hujjatga taʼsir qilmaydi. Asosiy hujjat uslublari odatda Shadow DOMga taʼsir qilmaydi, lekin bu nazorat qilinishi mumkin.
• DOM kapsüllash: Shadow DOM ichidagi elementlar asosiy DOM daraxtida ko'rinmaydi, bu tasodifiy selektorlar va manipulyatsiyalarni oldini oladi.
• Xulq-atvor kapsüllash: Mantiq va voqea ishlovchilari Shadow DOMda izolyatsiya qilinishi mumkin.

Shadow DOM yaratish misoli:

// Yangi DIV elementini yaratamiz
const hostElement = document.createElement('div');
// Shadow DOMni elementga qo'shamiz
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOMga mazmun qo'shamiz
shadowRoot.innerHTML = `
  <style>
    /* Faqat bu Shadow DOM ichida amal qiladi */
    p {
      color: blue;
    }
  </style>
  <p>Bu, Shadow DOM ichidagi matn</p>
`;

// Host elementni asosiy hujjatga qo'shamiz
document.body.appendChild(hostElement);

Qoʻllanmalari:

• Web komponentlarini qayta ishlatish uchun.
• Tashqi kutubxonalar uslublarini izolyatsiya qilish uchun.
• Komponentning ichki tafsilotlarini tashqi aralashuvlardan himoya qilish uchun.

Uslublar bilan ishlash xususiyatlari:

• Tashqi uslublar odatda Shadow DOMga taʼsir qilmaydi.
• :host pseudo-sinfidan foydalanib, Shadow Hostni Shadow DOM ichidan uslublash mumkin.
• :host-context() yordamida kontekstga asoslangan uslublash mumkin.
• <slot> ga joylashtirilgan elementlarni uslublash uchun ::slotted() pseudo-elementidan foydalanish mumkin.

<my-component>
  <!-- Bu element Shadow DOM ichidagi slotga "jo'natiladi" -->
  <span>Slot mazmuni</span>
</my-component>

// my-component komponentining Shadow DOM ichida
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* "my-slot" nomli slotga joylashtirilgan element uchun uslub */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Komponentning asosiy mazmuni</div>
  <slot></slot> <!-- Bu yerda slot mazmuni ko'rsatiladi -->
`;

Shadow DOM Web Components spetsifikatsiyasining bir qismidir.