Custom element tək başına stilləri qoruya bilmir: səhifənin p { color: red } qaydası komponentin daxilinə də keçir. Shadow DOM komponentə öz izolə olunmuş DOM və CSS-ini verir, <template> və <slot> isə şablon və məzmun ötürməyi asanlaşdırır.

Shadow DOM stil sərhədi
Shadow DOM stil sərhədi

Shadow DOM: host, shadow root, light DOM

  • host — shadow root-u daşıyan element;
  • shadow root — izolə olunmuş alt-ağac;
  • light DOM — host-un içində sizin yazdığınız uşaqlar.
js
class FancyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `
      <style>p { color: crimson; }</style>
      <p>Inside the shadow</p>`;
  }
}
customElements.define('fancy-card', FancyCard);

const card = document.createElement('fancy-card');
document.body.append(card);

console.log(card.shadowRoot.mode);                            // open
console.log(card.shadowRoot.querySelector('p').textContent);  // Inside the shadow
console.log(document.querySelector('p'));                     // null

⚠️ mode: 'closed' real təhlükəsizlik vermir (məsələn, brauzer genişlənmələri və testlər üçün çətinlik yaradır). Əksər komponentlər open seçir.

Sərhəddən nə keçir