This guide will walk you through the process of editing Shadow DOM elements using the visual editor. 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
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
Step 1: Access the visual editor
- 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
- Edit Shadow DOMs elements including styles, text and HTML
- Add Widgets: You can add predefined widgets to elements within the Shadow DOM. Note that custom widgets are not supported.
- Modify Styles: Use the CSS Variation Modal to apply styles specifically to Shadow DOM elements.
- Declare a container for the Shadow DOM
- CSS Overwrite or Merge: Choose whether to overwrite existing styles or merge new styles with existing ones.
Step 3: Apply JavaScript
The editor supports JavaScript functionality for elements within Shadow DOMs. Use the modal to specify selectors for both the container and the element.
Step 4: Save and review changes
- 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.
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