JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top"></div>
<div id="foo"></div>

CSS

.top {
		height: 50px;
		width: 100vw;
		background: red;
	}

JavaScript

let foo = document.getElementById('foo');
	foo.attachShadow({mode: 'open'});
    let bottom = document.createElement('div');
    let style = document.createElement('style');
	style.textContent = `
  :host: {
  width: 100vw
  }
	.bottom {
		height: calc(100vh - 50px);
		width: 100%;
		background: blue;
	}
	`;
    bottom.classList.add('bottom');
    foo.shadowRoot.appendChild(style);
    foo.shadowRoot.appendChild(bottom);