Existe-t-il Shadow DOM dans React ou seulement Virtual DOM?

En React, par défaut, le Virtual DOM est utilisé. Shadow DOM est une technologie distincte des composants web.

React utilise le Virtual DOM pour améliorer la performance de la mise à jour de l'interface utilisateur. Au lieu de manipuler directement le DOM réel à chaque changement d'état, React crée une copie légère du DOM en mémoire (Virtual DOM). Lors de changements, React compare le Virtual DOM actuel avec le précédent, trouve les différences minimales et ne met à jour que les parties nécessaires du DOM réel.

Shadow DOM, en revanche, fait partie de la norme des composants web et est conçu pour encapsuler les styles et la structure à l'intérieur des éléments personnalisés. Il crée un arbre DOM séparé, isolé du document principal.

Il est possible d'utiliser React avec des composants web utilisant Shadow DOM, mais React ne crée ni n'utilise Shadow DOM par défaut pour ses composants.

// Exemple de concept de Virtual DOM en React
// Lors d'un changement d'état, React compare le VDOM
// et met à jour uniquement les parties modifiées du DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React mettra à jour uniquement le nœud de texte avec le nombre dans le DOM réel
  }

  render() {
    return (
      <div>
        <p>Compteur : {this.state.count}</p> {/* Cette partie du composant sera virtualisée */}
        <button onClick={() => this.increment()}>Augmenter</button>
      </div>
    );
  }
}

<!-- Exemple d'utilisation de 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' }); // Création du Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Style encapsulé dans Shadow DOM */
        </style>
        <p>Ce texte est dans Shadow DOM</p>
      `;
    }
  });
</script>

Principales différences:

Caractéristique	Virtual DOM	Shadow DOM
Qu'est-ce que c'est?	Concept/pattern en mémoire	Technologie réelle du navigateur
Objectif	Optimisation de la mise à jour de l'UI	Encapsulation des styles et de la structure
Où est-il utilisé?	Frameworks/Libraries (React, Vue)	Composants web
Comment fonctionne-t-il?	Comparaison d'arbres en mémoire	Création d'un arbre DOM isolé