Shadow DOM dialog. Putting this here to use later as a dialog for my specific dialog needs for a dialog that won't be effected by site styling.

shadowDialog.js

(function() {
    var dialog = document.createElement('div'),
        shadow = dialog.createShadowRoot(),
        style = document.createElement('style'),
        paragraph = document.createElement('p');
    
    dialog.style.width = '500px';
    dialog.style.height = '500px';
    dialog.style.border = '3px solid gray';
    dialog.style.position = 'fixed';
    dialog.style.top = window.screen.availHeight / 2 - 300 + 'px';
    dialog.style.left = window.screen.availWidth / 2 - 300 + 'px';
    dialog.style.background = 'white';
    dialog.style.padding = '30px';
    
    style.textContent = 'p{font-size:2em;color:blue;}';
    paragraph.textContent = 'this is a shadow paragraph!';
    
    shadow.appendChild(style);
    shadow.appendChild(paragraph);
    document.body.appendChild(dialog);
}());