---
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: Vanilla JS
source: https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/vanillajs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Render a Survey in Shadow DOM (Vanilla JS)

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/index.css`

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

### `src/index.js`

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

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 surveyElement = document.createElement("div");
shadowRoot.appendChild(surveyElement);

const survey = new Model(json);
survey.render(surveyElement);
```

### `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": {
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/angular.md)
- [React](https://surveyjs.io/form-library/examples/render-survey-inside-shadow-dom/reactjs.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)