Rendering & Isolation

Both js/apps/yaleo and js/apps/bta-feed-prebid render content using YaleoPlacement from js/libs/yaleo/core, but wrap it in different isolation containers to prevent CSS leakage between the placement and the publisher page.

Shadow DOM

ShadowDomRoot creates a Shadow DOM around the placement. Styles defined inside don’t affect the parent page, and parent styles don’t bleed in.

Caution

When a Yaleo placement runs inside an existing iframe (e.g. served via Google), Shadow DOM mode extracts the content out of that iframe and renders the placement next to it, leaving the iframe empty. Some ad servers do not count empty iframes as valid ad impressions, which breaks tracking.

js/apps/bta-feed-prebid is not affected by this because it always renders in the top window document, never inside an iframe.

iFrame

IframeRoot renders the placement inside a real <iframe> using FriendlyFrame. The placement runs in a fully separate document, and the parent iframe (if any) is left intact — preserving ad server tracking.

iFrame mode is only available in js/apps/yaleo. It is the preferred rendering mode and migration of placements from Shadow DOM to iFrame is ongoing.

Why not Shadow DOM inside an iframe?

Nesting the existing Shadow DOM inside an iframe would be the simpler solution — no rendering mode changes needed. However, @font-face and @import rules for external fonts do not work inside a Shadow DOM — they must be defined in the top-level document context. This means the @import and @font-face rules from parentPageLayout would still need to be moved into the iframe’s document regardless. At that point the Shadow DOM adds no value — the iframe already provides isolation — so it makes more sense to render directly in the iframe document and drop the Shadow DOM entirely.

References:

• Rob Dodson — @font-face doesn’t work in Shadow DOM
• DEV Community — Why Fonts Don’t Work in Web Components and How to Fix It

Enabling iFrame mode (shadowDomRemoved)

The shadowDomRemoved flag on a Yaleo placement controls which isolation mode is used — false (default) for Shadow DOM, true for iFrame. It is configured in AdConsole under Yaleo / Placements → Styles → iFrame ready toggle.

It can also be overridden via the yaleo_shadow_dom_removed URL query parameter or the shadowDomRemoved option in window.yaleo.start().

Known iFrame issues

iFrame mode can introduce visual issues that don’t exist in Shadow DOM mode. Always test a placement before switching:

• Media queries — don’t work by default inside an iframe; a dynamic workaround is applied, but edge cases may remain.
• Fonts — may not load or apply correctly inside the iframe document.
• iFrame size — can be incorrect, especially when the placement is nested inside another iframe.

If issues appear after switching, disabling iFrame ready in AdConsole reverts the placement to Shadow DOM and can be used as a temporary workaround until a proper fix is applied.