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, resulting 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. See Mozilla's documentation on using shadow DOM.

You can use the shadow DOM setting to target elements in shadow DOM when using the Visual Editor. However, this can slow down your website as the snippet creates a bundle with the behavior to apply changes in shadow DOM elements, which increases its size.

This feature is a project-level setting and cannot be enabled for a specific experiment.

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. Select the desired snippet for which you want to enable shadow DOM support.
  3. 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.