Skip to content

fix: use uiContainer to apply position when creating shadow root ui#1939

Closed
namuorg wants to merge 1 commit into
wxt-dev:mainfrom
namuorg:fix-shadow-root
Closed

fix: use uiContainer to apply position when creating shadow root ui#1939
namuorg wants to merge 1 commit into
wxt-dev:mainfrom
namuorg:fix-shadow-root

Conversation

@namuorg

@namuorg namuorg commented Oct 15, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Overview

This is a companion PR for aklinker1/webext-core#118

Once the shadow DOM uses a <div> instead of constructing a full HTML document, the current approach of finding the <html> element won't work. Instead, the uiContainer will be used to position the content script UI.

Manual Testing

How to test this change:

  1. Create a new WXT extension using pnpm dlx wxt@latest init
  2. Use modified wxt
    • Clone wxt repo
    • Check out this PR
    • Run pnpm build in wxt/packages/wxt
    • In the extension directory, run pnpm link <path-to-wxt/packages/wxt> to use modified version of wxt
  3. Use modified webext-core
  4. Use createShadowRootUi with position overlay or modal to verify that the element is position as desired

Example code for testing:

export default defineContentScript({
  matches: ["<all_urls>"],
  cssInjectionMode: "ui",

  async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: "example-ui",
      position: "overlay", // <-- change between "inline", "overlay", "modal"
      anchor: "body",
      onMount(container) {
        const app = document.createElement("div");
        app.textContent = "Hello world!";
        app.style.padding = "8px";
        app.style.border = "2px solid red";
        container.append(app);
      },
    });

    ui.mount();
  },
});

@netlify

netlify Bot commented Oct 15, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name Link
🔨 Latest commit 456f1f5
🔍 Latest deploy log https://app.netlify.com/projects/creative-fairy-df92c4/deploys/68f01f8a4f343600082e4504
😎 Deploy Preview https://deploy-preview-1939--creative-fairy-df92c4.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@namuorg namuorg mentioned this pull request Oct 15, 2025
Closed
@namuorg namuorg closed this by deleting the head repository Jan 9, 2026
@namuorg namuorg mentioned this pull request Jan 11, 2026
Merged
@namuorg

namuorg commented Jan 11, 2026

Copy link
Copy Markdown
Contributor Author

Oops, I didn't realize that deleting my fork would automatically close the issue.

Reopened as #2036

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aklinker1 aklinker1 Awaiting requested review from aklinker1 aklinker1 is a code owner

@Timeraa Timeraa Awaiting requested review from Timeraa

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@namuorg