Managing Site CSS Inheritance

Default Campaign rendering

By default, campaigns served by the Dynamic Yield script are rendered directly into the DOM, and they inherit site CSS. As part of this functionality, you can not only inherit the site CSS but also access global JavaScript functions.

Sections that don't inherit site CSS

❗️
We recommend enabling Inherit site CSS and removing any redundant CSS from your Dynamic Yield campaigns. To do so, contact your Customer Success or Technical Account Manager.

If your section doesn't inherit site CSS, dynamic content and recommendation campaigns are rendered directly into the shadow DOM. As a result, these campaigns don't interfere with the DOM change detection of the front-end framework.

To enable seamless access to the campaigns' HTML elements, the campaign JavaScript code has multiple querying functions overridden, first querying the campaigns' shadow DOMs. If no elements are found, it queries the DOM as a fallback.

These functions are:

document.getElementById
document.querySelector
document.querySelectorAll
document.getElementsByName
document.getElementsByClassName
document.getElementsByTagName

Troubleshooting shadow DOM usage

What is #shadow-root, and why is it visible in all of my Dynamic Yield campaigns running on the page?

shadow-root (or shadow DOM) is how Dynamic Yield injects content into SPA-enabled sites, and should be visible within any campaigns running on the page that are set to replace/add before/add after. This is considered normal behavior for sites with SPA enabled.

Why does the CSS in my campaign not affect the elements on my web page?

Relevant to sites without the INHERIT_SITE_CSS feature flag enabled.

This behavior is also due to the shadow DOM. Elements (and style tags) within the shadow DOM are in a separate DOM instance from the rest of the web page.

If you're trying to manipulate objects running inside the shadow DOM from outside, or vice versa, use JavaScript instead of CSS.

Targeting the DOM from the shadow DOM (same syntax as no shadow DOM):

document.querySelector('#someElement').style.color = 'red';

Targeting the shadow DOM from the DOM:

document.querySelector('div[data-dy-embedded-object]').shadowRoot.querySelector('#someElement').style.color = 'red'

Targeting the shadow DOM from a separate shadow DOM:

// same as "Targeting Shadow DOM from DOM", but may want to add a waitForElement for timing purposes

DYO.waitForElement('#shadow-root-container div[data-dy-embedded-object]', function() {

   document.querySelector('#shadow-root-container div[data-dy-embedded-object]').shadowRoot.querySelector('#someElement').style.color = 'purple'

 })

📌
jQuery can be used to update the styling or toggle classes of elements running within the shadow DOM, using these same methods but with $() syntax instead of a querySelector.