Enable shadow DOM support for the Visual Editor

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Personalization

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

Shadow DOM is a hidden subtree that the overall DOM uses for a specific element. This lets the element hide and stay separate from the rest of the DOM. For more information, see Mozilla's documentation on using shadow DOM.

You can enable shadow DOM support for each of your snippets and 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

  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 to view and edit 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.