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

Shadow DOM — бул веб-стандарт, ал HTML, CSS жана JavaScriptти өзүнчө, изоляцияланган блокторго инкапсуляциялоого мүмкүндүк берет, негизги документтен бөлөк.

Негизги түшүнүктөр:

• Shadow Host: DOM элемент, ага Shadow DOM кошулат.
• Shadow Tree: Изоляцияланган DOM дарагы.
• Shadow Boundary: Shadow DOM менен негизги документтин ортосундагы чекит.
• Shadow Root: Shadow Treeнин түпкү түйүнү, ал element.attachShadow({ mode: 'open' | 'closed' }) аркылуу түзүлөт:
  • open: Shadow Root сырттан element.shadowRoot аркылуу жеткиликтүү.
  • closed: Shadow Root сырттан жеткиликтүү эмес.

Артыкчылыктары:

• Стильдерди инкапсуляциялоо: Shadow DOM ичинде аныкталган стильдер сыртка агып чыкпайт жана негизги документке таасир этпейт. Негизги документтен келген стильдер, адатта, Shadow DOMго таасир этпейт, бирок бул көзөмөлдөөгө болот.
• DOMдун инкапсуляциясы: Shadow DOM ичиндеги элементтер негизги DOM дарагында көрүнбөйт, бул случайдүү селекторлордун жана манипуляциялардын алдын алат.
• Поведениенин инкапсуляциясы: Логика жана иштетүүчү окуялар Shadow DOM ичинде изоляцияланат.

Мисал:

// Жаңы DIV элемент түзүү
const hostElement = document.createElement('div');
// Элементке Shadow DOM кошуу
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOMга мазмун кошуу
shadowRoot.innerHTML = `
  <style>
    /* Бул Shadow DOM ичинде гана колдонулуучу стиль */
    p {
      color: blue;
    }
  </style>
  <p>Бул Shadow DOM ичиндеги текст</p>
`;

// Хост-элементти негизги документке кошуу
document.body.appendChild(hostElement);

Колдонуу:

• Кайталап колдонулуучу веб-компоненттер түзүү.
• Үчүнчү тарап китепканалардын стильдерин изоляциялоо.
• Компоненттин ички деталдарын сырттан кийлигишүүдөн коргоо.

Стильдер менен иштөө өзгөчөлүктөрү:

• Чет элдик стильдер, адатта, Shadow DOMго таасир этпейт.
• :host псевдо-классты Shadow Host-ту ички жактан стилидөө үчүн колдонсо болот.
• :host-context() псевдо-классты контекстке негизделген стилизация үчүн колдонсо болот.
• ::slotted() псевдо-элементти слотторго (<slot>) коюлган элементтерди стилизациялоо үчүн колдонсо болот.

<my-component>
  <!-- Бул элемент Shadow DOM ичиндеги слотко "жөнөтүлөт" -->
  <span>Слот мазмуну</span>
</my-component>

// my-component компонентинин Shadow DOM ичинде
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* "my-slot" аталыштуу слотко коюлган элемент үчүн стиль */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Компоненттин негизги мазмуны</div>
  <slot></slot> <!-- Бул жерде слот мазмуны көрсөтүлөт -->
`;

Shadow DOM — бул Web Components спецификациясынын бөлүгү.