<style>
  #shadow {
    display: flex;
  }

  #backdrop {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
  }
</style>

<div id="backdrop"></div>
<div id="shadow"></div>

<script>
  const root = shadow.attachShadow({ mode: 'open' })
  root.innerHTML = `
  <div>asf</div>
  <style>
  div {
    background: white;
    z-index: 1;
  }
  </style>`
</script>