How to access DOM elements of parent from child appication which is used as iframe in parent?

I have an application (child) which is done by angular and used like a plugin , the application is used to change the style properties (like color, background etc) of application another applications.

So i injected the above application inside another project (parent) by iframe.

<iframe [src]="url" width="100%" height="900">
</iframe>

my purpose is to modify the styles of parent application by using child application.
So when i try to access the dom elements , getting some cross domain error like

> core.mjs:9171 ERROR DOMException: Blocked a frame with origin "http://192.168.1.7:4200" from accessing a cross-origin frame.

child component code look like this

parent.document.querySelector('body');
window.parent.document.querySelector('body')

Is there any way to get the dom elements of parent ?
Any suggestions?

you cannot access to the iframe from the parent nor vice-versa.
To communicate from the iFrame to it's parent you need to use postMessages: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage