# Shadow DOMs & iFrames
## How to edit Shadow DOM in the visual editor
This guide will walk you through the process of editing Shadow DOM elements using the visual editor. [Shadow DOM](https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/visual-editor/shadow-doms-and-iframes/understanding-shadow-dom) is a powerful feature that allows for encapsulation of DOM and CSS, creating self-contained components. With the latest updates, our visual editor now supports editing these elements, enhancing your ability to personalize and experiment with modern web technologies.
### Prerequisites
Before you begin, ensure that:
* You have access to the visual editor with the Shadow DOM feature enabled.
* You are familiar with the basic navigation and functionality of the visual editor.
### Step-by-Step Guide
#### Step 1: Access the visual editor
* Open the Visual Editor: Navigate to your project and launch the visual editor. Ensure you are working on a campaign that supports Shadow DOM editing.
#### Step 2: Edit Shadow DOM Elements
* Edit Shadow DOMs elements including styles, text and HTML
* Add Widgets: You can add predefined widgets to elements within the Shadow DOM. Note that custom widgets are not supported.
* Modify Styles: Use the CSS Variation Modal to apply styles specifically to Shadow DOM elements.
* Declare a container for the Shadow DOM
* CSS Overwrite or Merge: Choose whether to overwrite existing styles or merge new styles with existing ones.
[](https://gitlab.com/abtasty/team/product-management/gitbook-documentation/-/blob/main/user/.gitbook/assets/ac8c201272e72cafaa90a49c177fbe3d.png)
[](https://gitlab.com/abtasty/team/product-management/gitbook-documentation/-/blob/main/user/.gitbook/assets/4c2367ee322d1b457b5c5f7abd14c021.png)
#### Step 3: Apply JavaScript
The editor supports JavaScript functionality for elements within Shadow DOMs. Use the modal to specify selectors for both the container and the element.
#### Step 4: Save and review changes
* Save Changes: After making your edits, ensure you save your changes within the editor.
* Review Modifications: Use the Active Changes panel to review all modifications made to Shadow DOM elements.
[](https://gitlab.com/abtasty/team/product-management/gitbook-documentation/-/blob/main/user/.gitbook/assets/2a3bd90d80e4c421bf6b607e5fc208e1.png)
Although it is technically possible to add a Shadow DOM inside another Shadow DOM, this approach is not supported by our solution. Additionally, note that this feature does not work with 'closed Shadow DOM