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>
`;