Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Shadow Dom

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

src
- DogList.tsx
- index.css
- main.tsx
- vite-env.d.ts
.gitignore
README.md
eslint.config.js
index.html
package.json
tsconfig.json
vite.config.ts

tsx

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import './index.css'
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
    import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
    import { DogList } from './DogList'

    const appRoot = document.getElementById('root')

    if (appRoot) {
      const queryClient = new QueryClient()
      const shadowRoot = appRoot.attachShadow({ mode: 'open' })
      const root = ReactDOM.createRoot(shadowRoot)

      root.render(
            <div
              style={{
                width: '100vw',
                padding: '30px',
              }}
            >
              <h2>Dog Breeds</h2>
        </React.StrictMode>,
      )
    }

[Want to Skip the Docs?

“If you’re serious about really understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg?s=tanstack)