Shadow DOM дегеніміз не?

Shadow DOM — бұл веб-стандарт, ол компоненттің ішіне DOM ағашын және стильдерді инкапсуляциялауға мүмкіндік береді, оларды құжаттың қалған бөлігіне оқшаулайды.

Негізгі тұжырымдамалар:

• Shadow ағашы: Элементке қосылған жеке DOM ағашы.
• Shadow шекарасы: Shadow DOM-ды негізгі құжаттан бөлу шекарасы.
• Shadow иесі: Shadow DOM-ға қосылған элемент.
• Shadow түбірі: Shadow ағашының түбірлік түйіні.

Артықшылықтары:

• Стильдердің оқшаулануы: Shadow DOM ішіндегі стильдер оның сыртындағы элементтерге әсер етпейді, және керісінше.
• DOM-нің оқшаулануы: Shadow DOM ішіндегі DOM құрылымы көрінбейді және негізгі құжаттан тікелей қол жетімді емес, бұл идентификаторлар мен кластардың қайшылықтарын болдырмайды.
• Инкапсуляция: модульдік, қайта қолданылатын компоненттер құруға мүмкіндік береді.

Shadow DOM құру:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mode: 'open' - JavaScript-тан қол жетімді; 'closed' - жоқ

shadowRoot.innerHTML = `
  <style>
    /* Бұл Shadow DOM үшін стильдер */
    p {
      color: blue;
    }
  </style>
  <p>Бұл Shadow DOM мазмұны</p>
`;