რა არის Shadow DOM?

Shadow DOM - ეს არის ვებ სტანდარტი, რომელიც საშუალებას აძლევს ინკაპსულიროს DOM და CSS-ის კომპონენტის შიგნით. იგი ქმნის ცალკე, იზოლირებულ DOM ხეს, რომელსაც უწოდებენ "ჩრდილოვან ხეს" (shadow tree), რომელიც მიამაგრებულია ძირითადი დოკუმენტის ელემენტზე, რომელსაც უწოდებენ "ჩრდილოვან ფესვს" (shadow root).

Shadow DOM-ის უპირატესობები:

• CSS-ის იზოლაცია: Shadow DOM-ის შიგნით განსაზღვრული სტილები არ "ჩადიან" გარეთ, გავლენას ახდენენ ძირითადი დოკუმენტისზე, და პირიქით, ძირითადი დოკუმენტის სტილები ჩვეულებრივ არ ზემოქმედებს Shadow DOM-ზე.
• DOM-ის იზოლაცია: Shadow DOM-ის სტრუქტურა დაფარულია ძირითადი დოკუმენტიდან და ხელმისაწვდომი არაა სტანდარტული არჩევითი მეთოდებით (მაგ., querySelector).
• JavaScript-ის იზოლაცია: სკრიპტები, რომლებიც შესრულებულია ძირითადი დოკუმენტში, ადვილად ვერ მიიღებენ წვდომას Shadow DOM-ის ელემენტებზე.
• გადამეორებითი გამოყენება: Shadow DOM-ით შექმნილი კომპონენტები ადვილად შეიძლება გამოყენებულ იქნას სხვა ნაწილებში ან სხვა ვებგვერდებზე.

Shadow DOM-ის შექმნა:

// ვიღებთ ელემენტს, რომელსაც გვსურს მიამაგროთ Shadow DOM
const hostElement = document.getElementById('my-component');

// ვქმნით Shadow Root
// 'open' ხდის Shadow DOM-ს ხელმისაწვდომს გარედან hostElement.shadowRoot-ის მეშვეობით
// 'closed' მალავს Shadow DOM-ს
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// ვამატებთ ელემენტებს Shadow DOM-ის შიგნით
shadowRoot.innerHTML = `
  <style>
    /* ამ კომპონენტის სპეციფიკური სტილები */
    h2 {
      color: blue;
    }
  </style>
  <h2>კომპონენტის შიდა სათაური</h2>
  <p>კომპონენტის შიდა პარაგრაფი.</p>
`;

სინიშნულებები:

• სლოტები (Slots): საშუალებას აძლევს ჩასვათ გარე შინაარსი გარკვეულ ადგილებში Shadow DOM-ის შიგნით
• Shadow Parts: საშუალებას აძლევს სტილიზიროთ გარკვეული ელემენტები Shadow DOM-ის შიგნით გარე მხრიდან

Shadow DOM არის მნიშვნელოვანი კომპონენტი ვებ-კომპონენტების შექმნისთვის, რომელიც უზრუნველყოფს მძლავრ ინკაპსულაციას, საჭირო გახდის გამეორებად და თვითმომსახურე UI ელემენტების შექმნას.