რა არის Shadow DOM?

Shadow DOM არის ვებ სტანდარტი, რომელიც საშუალებას აძლევს HTML, CSS და JavaScript-ი ინკაპსულირებოდეს ცალკეულ, იზოლირებულ ბლოკებში ძირითადი დოკუმენტიდან:

მთავარი კონცეპტები:

• Shadow Host: DOM ელემენტი, რომელსაც მიერთებულია Shadow DOM.
• Shadow Tree: იზოლირებული DOM ხე.
• Shadow Boundary: საზღვარი Shadow DOM-სა და ძირითადი დოკუმენტს შორის.
• Shadow Root: Shadow Tree-ის ძირითადი ნული, რომელიც შეიქმნება element.attachShadow({ mode: 'open' | 'closed' })-ის საშუალებით:
  • open: Shadow Root ხელმისაწვდომია გარედან element.shadowRoot-ის საშუალებით.
  • closed: Shadow Root არ არის ხელმისაწვდომი გარედან.

უპირატესობები:

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

მოყვანილი მაგალითი:

// ახალი DIV ელემენტის შექმნა
const hostElement = document.createElement('div');
// Shadow DOM-ის მიერთება ელემენტთან
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

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

// ჰოსტ-ელემენტის დამატება ძირითადი დოკუმენტში
document.body.appendChild(hostElement);

გამოყენება:

• გამეორებადი ვებ-კომპონენტების შექმნა.
• მესამე მხარის ბიბლიოთეკების სტილების იზოლაცია.
• კომპონენტის შიდა დეტალების დაცვა გარე ჩარევებისგან.

სტილებთან მუშაობის თავისებურებები:

• გარე სტილები ჩვეულებრივ არ ახდენს გავლენას Shadow DOM-ზე.
• შეიძლება გამოყენებულ იქნას :host псევდო-საფუძველი Shadow Host-ის სტილიზაციისთვის შიგნიდან.
• შეიძლება გამოყენებულ იქნას :host-context() კონტექსტის საფუძველზე სტილიზაციისთვის.
• შეიძლება გამოყენებულ იქნას ::slotted() псევდო-ელემენტი სლოტებში (<slot>) განთავსებული ელემენტების სტილიზაციისთვის.

<my-component>
  <!-- ეს ელემენტი გადაეცემა Shadow DOM-ის სლოტს -->
  <span>სლოტის შინაარსი</span>
</my-component>

// Shadow DOM-ის შიგნით my-component-ის კომპონენტში
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* სტილი, რომელიც ეხება "my-slot" სახელწოდების სლოტში განთავსებულ ელემენტს */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>ძირითადი შინაარსი კომპონენტის</div>
  <slot></slot> <!-- აქ გამოჩნდება სლოტის შინაარსი -->
`;

Shadow DOM არის Web Components-ის სტანდარტის ნაწილი.