fancy-intern-4869
07/23/2022, 4:30 PMtypescript
// content-script-ui-mount.tsx
async function createShadowContainer() {
const container = document.createElement("div")
container.id = "plasmo-shadow-container"
container.style.cssText = `
z-index: 1;
position: absolute;
`
const shadowHost = document.createElement("div")
// 👇 This is the 1 LOC change; ideally though, I'd like to be able to `import { SHADOW_HOST_ID } from "plasmo"`
shadowHost.id = "plasmo-shadow-host"
const shadowRoot = shadowHost.attachShadow({ mode: "open" })
document.body.insertAdjacentElement("beforebegin", shadowHost)
if (typeof Mount.getStyle === "function") {
shadowRoot.appendChild(await Mount.getStyle())
}
shadowRoot.appendChild(container)
return container
}