Since I could not get iframes to work in browsers on ios, I am trying to replace the functionality of the iframe with a webcomponent:

class EmbeddedWebview extends HTMLElement {
  connectedCallback() {
    fetch(this.getAttribute('src'))
      .then(response => response.text())
      .then(html => {
        const shadow = this.attachShadow({ mode: 'closed' });
        shadow.innerHTML = html;
      });
  }
}
 
window.customElements.define(
  'embedded-webview',
  EmbeddedWebview
);

and then use it in html as follows:

<embedded-webview src="a/b/index.html"></embedded-webview>

This works, except when the site with the embedded-webview tag is loaded a different path, e.g. root (e.g. /index.html) the included content tries to load assets (e.g. css, etc) from the wrong url.

How can I solve this issue? Is there a way to set the origin of the innerHTML?