Dynamic scripts are not loading in to parent index.html rather loading in iframe index.html

I am trying to load the scripts in index.html dynamically which are loading in the iframe index.html, not in the parent index.html.

Here is the dynamic scripts loading in angular constructor code:

constructor() {
  const paymentGPIUS = [
    'href="https://sc-ols-onlinebooking-dev.s3-us-west-2.amazonaws.com/ols-onlinebooking-ui/add-card-widget/styles.css',
    'http://127.0.0.1:5500/dist/ols-onlinebooking-ui/add-card-widget/element.js'
  ];
  const node = document.createElement('script');
  node.src = paymentGPIUS[0];
  node.type = 'text/javascript';
  node.async = false;
  document.body.appendChild(node);
  // document.head.appendChild(node);
  const node2 = document.createElement('link');
  node2.rel = 'stylesheet'
  node2.href = paymentGPIUS[1];
  document.body.appendChild(node2);
}

Here is code to load scripts but it’s loading into iframe inde.html:

enter image description here

In the above image, scripts are loading below styles both link and scripts into iframe, not in parent index.html