Shadow DOM деген эмне?

Shadow DOM - бул веб-стандарт, ал DOM жана CSSти компоненттин ичинде инкапсуляциялоого мүмкүндүк берет. Ал өзүнчө, изоляцияланган DOM дарагын түзөт, аны "көңүрт дарак" (shadow tree) деп аталган жана негизги документтеги элементке бекитилген, "көңүрт тамыр" (shadow root) деп аталган дарак түзөт.

Shadow DOMдун артыкчылыктары:

• CSS изоляциясы: Shadow DOM ичинде аныкталган стильдер сыртка "агып" кетпейт, негизги документке таасир этпейт, жана тескерисинче, негизги документтин стилдери әдепкисинче Shadow DOMго таасир этпейт.
• DOM изоляциясы: Shadow DOMдун структурасы негизги документтен жашырылган жана стандарттык тандоочу ыкмалар менен жеткиликтүү эмес (мисалы, querySelector).
• JavaScript изоляциясы: Негизги документте иштеген скрипттер Shadow DOM ичиндеги элементтерге оңой эле жетпейт.
• Кайталап колдонуу: Shadow DOM менен түзүлгөн компоненттер башка бөлүктөрдө же башка веб-сайттарда оңой колдонулушу мүмкүн.

Shadow DOM түзүү:

// Shadow DOMти бекитүүнү каалаган элементти алабыз
const hostElement = document.getElementById('my-component');

// Shadow Root түзүү
// 'open' Shadow DOMти сырттан hostElement.shadowRoot аркылуу жеткиликтүү кылат
// 'closed' Shadow DOMти жашырат
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOM ичиндеги элементтерди кошуу
shadowRoot.innerHTML = `
  <style>
    /* Бул компонентке тиешелүү стильдер */
    h2 {
      color: blue;
    }
  </style>
  <h2>Компоненттин ички башаты</h2>
  <p>Компоненттин ички параграфы.</p>
`;

Өзгөчөлүктөрү:

• Слоттор (Slots): сырттан мазмұнду белгилүү жерлерге кошууга мүмкүндүк берет
• Көңүрт бөлүктөр (Shadow Parts): сырттан Shadow DOM ичиндеги белгилүү элементтерди стилизациялоого мүмкүндүк берет

Shadow DOM веб-компоненттер түзүүдө негизги компонент болуп саналат, күчтүү инкапсуляцияны камсыз кылып, кайра колдонулчу жана өзүн-өзү жетиштүү UI элементтерин түзүүгө мүмкүндүк берет.