Objective: Create a new window, add elements to it, and then apply CSS styles to the elements in the new window using an external style sheet.
Issue: While I am able to add elements to the new window and link it to an external style sheet in the head section, the styles from the CSS sheet are not being applied to the elements in the new window.
Fiddle https://jsfiddle.net/1f2per3s/
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', '/stylesheets/my.css');
win.document.head.appendChild(link);
let div = document.createElement('div');
div.innerHTML = '<div> hello world</div>';
win.document.body.appendChild(div);
});
HTML
<div class="container">
<div class="button">
test element
</div>
</div>