Shadow DOM чист?

Shadow DOM — бу, стандарт веб, ки имкон медиҳад, ки дарахти DOM ва услубҳоро дар дохили компонент инкапсулатсия кунад ва онҳоро аз қисми дигаре аз ҳуҷҷат ҷудо созад.

Консепсияҳои асосӣ:

• Shadow tree: Дарахти DOM-и худ, ки ба унсури пайваст мешавад.
• Shadow boundary: Саҳна, ки Shadow DOM-ро аз ҳуҷҷати асосӣ ҷудо мекунад.
• Shadow host: Унсур, ки ба он Shadow DOM пайваст аст.
• Shadow root: Нодҳои асосии Shadow tree.

Афзалиятҳо:

• Изоляцияи услубҳо: Услубҳое, ки дар дохили Shadow DOM муайян шудаанд, ба унсурҳои берун аз он таъсир намерасонанд, ва баръакс.
• Изоляцияи DOM: Тарҳрезии DOM дар дохили Shadow 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>
`;