Existuje Shadow DOM v Reactu nebo jen Virtual DOM?

Ve Reactu se standardně používá Virtual DOM. Shadow DOM je samostatná technologie webových komponent.

React využívá Virtual DOM ke zvýšení výkonu aktualizace uživatelského rozhraní. Místo přímé manipulace s reálným DOM při každé změně stavu React vytvoří lehkou kopii DOM v paměti (Virtual DOM). Při změnách React porovná aktuální Virtual DOM s předchozím, najde minimální rozdíly a aktualizuje pouze potřebné části reálného DOM.

Shadow DOM je naopak součástí standardu webových komponent a je určen k enkapsulaci stylů a struktury uvnitř vlastních prvků. Vytváří samostatné stromové uspořádání DOM, izolované od hlavního dokumentu.

React lze používat společně s webovými komponentami, které využívají Shadow DOM, ale React sám implicitně Shadow DOM nevytváří ani nepoužívá.

// Příklad konceptu Virtual DOM v Reactu
// Při změně stavu React porovná VDOM
// a aktualizuje pouze změněné části DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React aktualizuje pouze textový uzel s číslem v reálném DOM
  }

  render() {
    return (
      <div>
        <p>Čítač: {this.state.count}</p> {/* Tato část bude virtualizována */}
        <button onClick={() => this.increment()}>Zvýšit</button>
      </div>
    );
  }
}

<!-- Příklad použití Shadow DOM -->
<my-custom-element></my-custom-element>

<script>
  customElements.define('my-custom-element', class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' }); // Vytvoření Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Styl uzavřen v Shadow DOM */
        </style>
        <p>Tento text je v Shadow DOM</p>
      `;
    }
  });
</script>

Hlavní rozdíly:

Vlastnost	Virtual DOM	Shadow DOM
Co to je?	Koncept/mustr v paměti	Reálná technologie prohlížeče
Účel	Optimalizace aktualizace UI	Inkapsulace stylů a struktury
Kde se používá?	Frameworky/Knihovny (React, Vue)	Webové komponenty
Jak funguje?	Porovnání stromů v paměti	Vytváření izolovaného stromu DOM