How do I print an Angular component when using Material and SCSS styles?

Question

I am trying to add an printing function to my angular web-app. There are different Dialogs, which should be printed with a button click. I already found two approaches but I can't get them to work.

In the first approach the innerHTML of the document is set to the root element of the dialog, which works perfectly fine. However after printing, when the HTML is reset to the original content, the site freezes and you can't do anything without reloading the page.

  printComponent() {
    const printElement = document.getElementById("vital-sign-dialog")!;
    let printContents = printElement.innerHTML;
    let originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
    window.focus();
  }

In the second approach a new window is opened for the printing process which would technically fix my first problem. But because I am using SCSS, I could not pass my styles since I couldn't find a way to convert the SCSS or get the CSS of the current document.

  printComponent() {
    const printContent = document.getElementById("vital-sign-dialog")!;
    const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0')!;
    WindowPrt.document.write(printContent.innerHTML);
    WindowPrt.document.close();
    WindowPrt.focus();
    WindowPrt.print();
    WindowPrt.close();
  }