Shadow DOM რა არის?

Shadow DOM — ეს ვებ სტანდარტია, რომელიც საშუალებას აძლევს კომპონენტის შიგნით DOM ხე და სტილები ინკაპსულირდეს და გამოეყოს დოკუმენტის სხვა ნაწილიდან.

ძირითადი კონცეფციები:

• Shadow tree: საკუთარი DOM ხე, რომელიც მიერთებულია ელემენტთან.
• Shadow boundary: საზღვარი, რომელიც გამოყოფს Shadow DOM-ს ძირითადი დოკუმენტიდან.
• Shadow host: ელემენტი, რომელსაც მიერთებულია Shadow DOM.
• Shadow root: Shadow ხის ძირითადი ნოდი.

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

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

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

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // რეჟიმი: 'open' - ხელმისაწვდომია JavaScript-ით; 'closed' - არა

shadowRoot.innerHTML = `
  <style>
    /* ამ Shadow DOM-ის სტილები */
    p {
      color: blue;
    }
  </style>
  <p>ეს არის Shadow DOM-ის შინაარსი</p>
`;