---
title: Render a Survey in Shadow DOM
product: Form Library
description: See how to render a SurveyJS form inside Shadow DOM for full style isolation, no CSS conflicts, and predictable rendering in any host application.
framework: React
source: https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Render a Survey in Shadow DOM (React)

This example demonstrates how to render the SurveyJS Form Library inside the Shadow DOM. In Angular, set the component's `encapsulation` property to `ViewEncapsulation.ShadowDom`. In other frameworks, append the `survey-core.css` stylesheet directly to the shadow root instead of referencing it globally or importing it into the component. Switch to the Code tab to see an implementation example. The survey configuration remains the same as when rendering outside the Shadow DOM.

## Files

### `public/index.html`

```html
<div id="root"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const shadowHost = document.getElementById('root');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://unpkg.com/survey-core/survey-core.min.css";

shadowRoot.appendChild(link);

const root = createRoot(shadowRoot);
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "dropdown",
      "name": "current-car",
      "title": "Which is the brand of your current car?",
      "showNoneItem": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ],
      "allowCustomChoices": true
    },
    {
      "type": "tagbox",
      "name": "previous-cars",
      "title": "Which car brands have you owned before?",
      "showNoneItem": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ],
      "allowCustomChoices": true
    }
  ]
};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/vanillajs.md)