new window - adding css to head

Trying to add a css external link in a new window.document.head

HTML

<div class="container">
  <div class="button">
    test element
  </div>
</div>

CSS

.button {
  display: inline-flex;
  justify-content: center;
  align-content: center;
  background-color: #8873aa;
  font-size: 14pt;
  color: white;
  font-family: sans-serif;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 15px;
  padding-left: 15px;
  font-weight: 300;
  transition: .25s;
}

.button:hover {
  background-color: #9973cc;
  transition: .25s;
  cursor: pointer;
}

JavaScript

$('.button').on('click', function() {
  let win = window.open();
  
  let link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('href', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
  win.document.head.appendChild(link);
  
  // You can do this
  let div = document.createElement('div');
  div.innerHTML = 'hello world';
  win.document.body.appendChild(div);
  
  // Or this
  // win.document.body.innerHTML = '<div> hello world</div>';
});