Esiste Shadow DOM in React o solo Virtual DOM?

In React, per impostazione predefinita, viene utilizzato il Virtual DOM. Shadow DOM è una tecnologia separata dei web component.

React utilizza il Virtual DOM per migliorare le prestazioni dell'aggiornamento dell'interfaccia utente. Invece di manipolare direttamente il DOM reale ad ogni cambiamento di stato, React crea una copia leggera del DOM in memoria (Virtual DOM). Quando ci sono cambiamenti, React confronta il Virtual DOM attuale con quello precedente, trova le differenze minime e aggiorna solo le parti necessarie del DOM reale.

Shadow DOM, invece, fa parte dello standard dei web component ed è progettato per incapsulare stili e struttura all'interno di elementi personalizzati. Crea un albero DOM separato, isolato dal documento principale.

È possibile usare React insieme a web component che utilizzano Shadow DOM, ma React di default non crea né utilizza Shadow DOM per i propri componenti.

// Esempio di concetto di Virtual DOM in React
// Quando lo stato cambia, React confronta il VDOM
// e aggiorna solo le parti modificate del DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React aggiornerà solo il nodo di testo con il numero nel DOM reale
  }

  render() {
    return (
      <div>
        <p>Contatore: {this.state.count}</p> {/* Questa parte del componente sarà virtualizzata */}
        <button onClick={() => this.increment()}>Incrementa</button>
      </div>
    );
  }
}

<!-- Esempio di utilizzo di 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' }); // Creazione di Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Stile incapsulato in Shadow DOM */
        </style>
        <p>Questo testo è in Shadow DOM</p>
      `;
    }
  });
</script>

Principali differenze:

Caratteristica	Virtual DOM	Shadow DOM
Cos'è?	Concetto/pattern in memoria	Tecnologia reale del browser
Scopo	Ottimizzazione dell'aggiornamento UI	Incapsulamento di stili e struttura
Dove viene usato?	Framework/Librerie (React, Vue)	Web component
Come funziona?	Confronto di alberi in memoria	Creazione di un albero DOM isolato