Existe Shadow DOM no React ou apenas Virtual DOM…

Por padrão, o React utiliza o Virtual DOM. Shadow DOM é uma tecnologia separada dos componentes web.

O React usa o Virtual DOM para melhorar o desempenho da atualização da interface de utilizador. Em vez de manipular diretamente o DOM real em cada alteração de estado, o React cria uma cópia leve do DOM na memória (Virtual DOM). Quando há alterações, o React compara o Virtual DOM atual com o anterior, encontra as diferenças mínimas e atualiza apenas as partes necessárias do DOM real.

O Shadow DOM, por outro lado, faz parte do padrão de componentes web e é projetado para encapsular estilos e estrutura dentro de elementos personalizados. Ele cria uma árvore DOM separada, isolada do documento principal.

É possível usar o React juntamente com componentes web que utilizam Shadow DOM, mas o React por padrão não cria nem usa Shadow DOM para os seus componentes.

// Exemplo de conceito de Virtual DOM no React
// Ao alterar o estado, o React compara o VDOM
// e atualiza apenas as partes modificadas do DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // O React atualizará apenas o nó de texto com o número no DOM real
  }

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

<!-- Exemplo 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' }); // Criação do Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Estilo encapsulado no Shadow DOM */
        </style>
        <p>Este texto está no Shadow DOM</p>
      `;
    }
  });
</script>

Principais diferenças:

Característica	Virtual DOM	Shadow DOM
O que é?	Conceito/padrão em memória	Tecnologia real do navegador
Propósito	Otimização da atualização de UI	Encapsulamento de estilos e estrutura
Onde é usado?	Frameworks/Libraries (React, Vue)	Web components
Como funciona?	Comparação de árvores em memória	Criação de uma árvore DOM isolada

Existe Shadow DOM no React ou apenas Virtual DOM?