Access iframe content with Svelte

Question

I am trying to access the head element within an iframe to change the styling. But everything that I can think of is not working.
This is my current code:

<script>
  let frame;
  onMount(() => {
    frame.addEventListener('load', onLoad());
  })
  function onLoad() {
    let head = frame.contentDocument.head || frame.contentWindow.document.head;
    console.log(head);
  }
</script>

<iframe bind:this={frame} src="src_here" title="preview" />

This will successfully log the iframe but the innerHTML is blank.

Answer 1

I think you don't access well the head element.

try something like this:

function onLoad() {
    const head = frame.contentDocument.querySelector('head');
    console.log(head);
}