Drukowanie a ładowanie styli w nowym oknie

Witam
Mam taka funkcyjke której zadanie to wydrukowanie fragmentu strony w nowo otwartym oknie z innym arkuszem css.

async function print_frag(id) {
  var div;

  div = document.getElementById(id);
  okno = window.open("tml/blank.html", "", "toolbar=0, location=0, resizable=1, directories=0, status=1, menubar=1, scrollbars=1, height=600, width=700, top=80, left=350");
  var html = div.innerHTML;

  html = '<html><head><link rel="stylesheet" href="/css/print.css" type="text/css" /></head><body>' + html + '</body></html>';

  await okno.document.write(html);
  okno.focus();
  okno.print();
  
  //okno.close();
}

Na FF spoko niby wszytko działa - podgląd druku pokazuje to co trzeba i tak jak trzeba.
Na Chrome otwiera się okno i podgląd druku bez styli :/ dopiero zamknięcie tego podglądu pokazuje iż strona ma style i wymuszenie ponowne druku (CTRL+P) pokazuje ponownie podgląd strony - ale już z stylami.
Myślałem iż Async/await pomoże ale nie :/

Spróbuj załadować CSS przez tag <style></style>

@Xarviel: nie za bardzo rozumiem co masz na myśli. Wklejanie bezpośrednio tych styli jest słabe - zwłaszcza że dużo tego.

No dobra, jeśli nie chcesz wklejać na sztywno to mogę rozbudować swój pomysł o dynamiczne pobieranie styli przez fetch i dopiero później wklejenie ich do tagu style.

async function print_frag(id) {
  var div;

  div = document.getElementById(id);
  okno = window.open("tml/blank.html", "", "toolbar=0, location=0, resizable=1, directories=0, status=1, menubar=1, scrollbars=1, height=600, width=700, top=80, left=350");
  var html = div.innerHTML;

  const response = await fetch('https://example.com/assets/style.css');
  const css = await response.text();

  html = '<html><head><style>' + css + '</style></head><body>' + html + '</body></html>';

  await okno.document.write(html);
  okno.focus();
  okno.print();

  //okno.close();
}