Shadow DOM nedir?

Shadow DOM — bu, bileşenin içinde DOM ağacını ve stilleri kapsüllemeye ve belge içinden izole etmeye olanak tanıyan bir web standartıdır.

Ana kavramlar:

• Shadow tree: Kendi DOM ağacı, bir elemana bağlıdır.
• Shadow boundary: Shadow DOM ile ana belgeyi ayıran sınır.
• Shadow host: Shadow DOM'un bağlı olduğu element.
• Shadow root: Shadow ağacının kök düğümü.

Avantajlar:

• Stil izolasyonu: Shadow DOM içinde tanımlanan stiller, dışındaki öğeleri etkilemez ve tersi de geçerlidir.
• DOM izolasyonu: Shadow DOM içindeki DOM yapısı görünür değildir ve ana dokümandan doğrudan erişilebilir değildir, bu da id ve sınıf çakışmalarını önler.
• Kapsülleme: Modüler ve yeniden kullanılabilir bileşenler oluşturur.

Shadow DOM Oluşumu:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mod: 'open' - JavaScript'ten erişilebilir; 'closed' - erişilemez

shadowRoot.innerHTML = `
  <style>
    /* Bu Shadow DOM için stil */
    p {
      color: blue;
    }
  </style>
  <p>Bu, Shadow DOM içeriğidir</p>
`;