JSFiddle - React, Tailwind, and code Playground

HTML

<broken-positioning></broken-positioning>
<button>button outside the shadow tree</button>

CSS

button {
  position: fixed;
  left: calc(100vw - 200px);
}

JavaScript

const hostStyles = () => {
  const stylesTag = document.createElement("style")
  stylesTag.innerHTML = `
		button {
      position: fixed;
		  left: calc(100vw - 200px);
      left: calc((var(--vw, 1vw) * 100) - 200px);
    }
  `
  return stylesTag
}

function recalculateVW() {
    const vw = window.innerWidth * 0.01
	  document.documentElement.style.setProperty("--vw", `${vw}px`)
}

class Test extends HTMLElement {
  connectedCallback() {
    this.root = this.attachShadow({ mode: "open" })
    this.root.innerHTML = `<div>Shadow element <button>button inside the shadow tree</button> </div>`;
    this.root.appendChild(hostStyles())
    window.addEventListener("resize", recalculateVW)
  }
}

customElements.define("broken-positioning", Test)