# 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/~/revisions/GC5NNyAZNIhN8XxZ5KK5/web-experimentation-and-personalization/editors-and-widget/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 <a href="#h_01jk82c99xpn67effp4hj06ah1" id="h_01jk82c99xpn67effp4hj06ah1"></a>

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 <a href="#h_01jk82c99x9thgddrfmjcte0ja" id="h_01jk82c99x9thgddrfmjcte0ja"></a>

### Step 1: Access the visual editor <a href="#h_01jk82c99x0mhs36m3dr2aydkv" id="h_01jk82c99x0mhs36m3dr2aydkv"></a>

* 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 <a href="#h_01jk82c99xjg2rqdr4yrspwwd9" id="h_01jk82c99xjg2rqdr4yrspwwd9"></a>

* Edit Shadow DOMs elements including styles, text and HTML

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-be99e75649193b206e8fd1dbb0a26bed3b926066%2F419f398b4ee02c0c2e14b10e1ecf7380.png?alt=media)

* Add Widgets: You can add predefined widgets to elements within the Shadow DOM. Note that custom widgets are not supported.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-dbac9a3a554d8572dbd52e42a695d74c98e2d976%2Fbc05e52ae260937d1313d86664566b55.png?alt=media)

* Modify Styles: Use the CSS Variation Modal to apply styles specifically to Shadow DOM elements.
  * Declare a container for the Shadow DOM

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-78482726fe74b9085454bf82ed3862db6f4fda90%2F9134161a895380fd7100ca1b2b786d03.png?alt=media)

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-f530ac61ef7c9f4038cffac46e3168a8d815d930%2F265b3f1f96bd3cd4ea81fc24bbbc4e5a.png?alt=media)

* CSS Overwrite or Merge: Choose whether to overwrite existing styles or merge new styles with existing ones.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-289d0247d4c5ceb69de0f52b635c77bb04db7d89%2Fac8c201272e72cafaa90a49c177fbe3d.png?alt=media)

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-0b1b0a75c1962948135c9f0a08fcc12ebc97262f%2F4c2367ee322d1b457b5c5f7abd14c021.png?alt=media)

### Step 3: Apply JavaScript <a href="#h_01jk82c99xqeps4knzq9mbgd7b" id="h_01jk82c99xqeps4knzq9mbgd7b"></a>

The editor supports JavaScript functionality for elements within Shadow DOMs. Use the modal to specify selectors for both the container and the element.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-5cbe2544922eb29a7526bfac9d54b12cc5f2df57%2F3c70b3053c09b1d5893288aa24c0aa75.png?alt=media)

### Step 4: Save and review changes <a href="#h_01jk82c99ynm5ae9p4bz5qhe4v" id="h_01jk82c99ynm5ae9p4bz5qhe4v"></a>

* 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://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-49db8c7a685e4631b32e54f7546fc305b7c45d40%2F2a3bd90d80e4c421bf6b607e5fc208e1.png?alt=media)

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
