diff --git a/dotcom-rendering/src/components/InteractiveAtom.tsx b/dotcom-rendering/src/components/InteractiveAtom.tsx index 65d8c280435..067a18222a7 100644 --- a/dotcom-rendering/src/components/InteractiveAtom.tsx +++ b/dotcom-rendering/src/components/InteractiveAtom.tsx @@ -53,7 +53,6 @@ export const InteractiveAtom = ({ css={[containerStyles, !!isMainMedia && fullHeightStyles]} data-atom-id={id} data-atom-type="interactive" - {...(customData ? { 'data-atom-custom-data': customData } : {})} > diff --git a/dotcom-rendering/src/lib/interactiveAtoms.test.tsx b/dotcom-rendering/src/lib/interactiveAtoms.test.tsx index ac068bd0a65..eb95648c599 100644 --- a/dotcom-rendering/src/lib/interactiveAtoms.test.tsx +++ b/dotcom-rendering/src/lib/interactiveAtoms.test.tsx @@ -6,7 +6,7 @@ import { InteractiveLayoutAtom } from '../components/InteractiveLayoutAtom'; const mockCustomData = JSON.stringify({ key: 'value' }); describe('Interactive atom custom data attributes', () => { - it('should add custom data attribute to InteractiveAtom on web', () => { + it('should inject custom data into srcDoc for InteractiveAtom on web', () => { const { container } = render( { /> , ); - const el = container.querySelector( - `[data-atom-custom-data='${mockCustomData}']`, + const iframe = container.querySelector('iframe'); + expect(iframe?.srcdoc).toContain( + `window.__atomCustomData = ${mockCustomData}`, ); - expect(el).toBeInTheDocument(); }); - it('should add custom data attribute to InteractiveAtom on apps', () => { + it('should inject custom data into srcDoc for InteractiveAtom on apps', () => { const { container } = render( { /> , ); - const el = container.querySelector( - `[data-atom-custom-data='${mockCustomData}']`, + const iframe = container.querySelector('iframe'); + expect(iframe?.srcdoc).toContain( + `window.__atomCustomData = ${mockCustomData}`, ); - expect(el).toBeInTheDocument(); }); it('should add custom data attribute to InteractiveLayoutAtom', () => { diff --git a/dotcom-rendering/src/lib/unifyPageContent.tsx b/dotcom-rendering/src/lib/unifyPageContent.tsx index 2f1c4499a15..da6874b4274 100644 --- a/dotcom-rendering/src/lib/unifyPageContent.tsx +++ b/dotcom-rendering/src/lib/unifyPageContent.tsx @@ -6,11 +6,13 @@ export const unifyPageContent = ({ elementJs, elementHtml, renderingTarget, + customData, }: { elementCss?: string; elementJs?: string; elementHtml?: string; renderingTarget: RenderingTarget; + customData?: string; }): string => renderToString( @@ -29,6 +31,13 @@ export const unifyPageContent = ({
)} + {!!customData && ( +