Enable shadow DOM support for the Visual Editor

  • Updated

Relevant products:

  • Optimizely Web Experimentation

The Document Object Model (DOM) treats each object in your HTML or XML body as a separate node, which results in a tree-like data structure representation of your HTML or XML.

Shadow DOM is a hidden subtree used for a specific element in the overall DOM, allowing that element to be kept hidden and separate from the rest of the DOM. For more information, see Mozilla's documentation on using shadow DOM.

In Optimizely Web Experimentation, you can enable shadow DOM support for each of your snippets, allowing you to use the Visual Editor to make changes to shadow DOM elements.

If you do not enable shadow DOM support, you cannot access any shadow DOM elements in the Visual Editor.

Enable shadow DOM support

To enable shadow DOM support in Optimizely Web Experimentation:

  1. Go to Settings > Implementation.
  2. If you have multiple snippets, select the desired snippet for which you want to enable shadow DOM support.
  3. In the Snippet Settings section, select the Enable Support for Shadow DOM checkbox.
  4. Click Save.

Shadow DOM elements in the Visual Editor

The process for viewing and editing shadow DOM elements in the Visual Editor is the same as regular DOM elements. For more information on using the Visual Editor, see Visual Editor in Optimizely Web Experimentation and Optimizely Performance Edge.