It's a 1 LOC change if you don't want to expose th...
# 💡feature-requests
f
It's a 1 LOC change if you don't want to expose the id as a constant as well (which would be preferred IMO).
Copy code
typescript
// 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
}