Enable shadow DOM support for the Visual Editor

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.

If you do not enable shadow DOM support, you cannot access any 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.