¿Existe Shadow DOM en React o solo Virtual DOM?

En React, por defecto, se utiliza Virtual DOM. Shadow DOM es una tecnología separada de los componentes web.

React usa Virtual DOM para mejorar el rendimiento de la actualización de la interfaz de usuario. En lugar de manipular directamente el DOM real en cada cambio de estado, React crea una copia ligera del DOM en memoria (Virtual DOM). Cuando hay cambios, React compara el Virtual DOM actual con el anterior, encuentra las diferencias mínimas y actualiza solo las partes necesarias del DOM real.

Shadow DOM, por otro lado, es parte del estándar de componentes web y está diseñado para encapsular estilos y estructura dentro de elementos personalizados. Crea un árbol DOM separado, aislado del documento principal.

Se puede usar React junto con componentes web que utilizan Shadow DOM, pero React por defecto no crea ni usa Shadow DOM para sus componentes.

// Ejemplo de concepto de Virtual DOM en React
// Al cambiar el estado, React compara el VDOM
// y actualiza solo las partes modificadas del DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React actualizará solo el nodo de texto con el número en el DOM real
  }

  render() {
    return (
      <div>
        <p>Contador: {this.state.count}</p> {/* Esta parte del componente será virtualizada */}
        <button onClick={() => this.increment()}>Incrementar</button>
      </div>
    );
  }
}

<!-- Ejemplo de uso 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' }); // Creación de Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Estilo encapsulado en Shadow DOM */
        </style>
        <p>Este texto está en Shadow DOM</p>
      `;
    }
  });
</script>

Diferencias principales:

Característica	Virtual DOM	Shadow DOM
¿Qué es?	Concepto/patrón en memoria	Tecnología real del navegador
Propósito	Optimización de actualización de UI	Encapsulación de estilos y estructura
¿Dónde se usa?	Frameworks/Librerías (React, Vue)	Componentes web
¿Cómo funciona?	Comparación de árboles en memoria	Creación de un árbol DOM aislado