content script shadowui not work, but integrateui work

[zshnb]

Describe the bug

I'm using React to build a content script, first I try use createShadowRootUi to mount onto page, but is doens't work, then I change to createIntegratedRootUi it works. I use tailwindcss + React.

Reproduction

contentui-issue.zip

Steps to reproduce

1. download zip file, delete node_modules dir, then run pnpm i
2. run npm run dev, then open youtube, nothing shows on page
3. modify content.tsx, code is below

const floatUi = createIntegratedUi(ctx, {
      position: 'inline',
      anchor: 'body',
      onMount: (container) => {
        const root = ReactDOM.createRoot(container);
        root.render(<FloatToolbar />);
        return root;
      },
      onRemove: (root) => {
        root?.unmount();
      },
    });

after refresh you can see a float box on page

System Info

System:
    OS: macOS 15.6.1
    CPU: (14) arm64 Apple M4 Pro
    Memory: 2.78 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.12.0 - /Users/zsh/.nvm/versions/node/v24.12.0/bin/node
    npm: 11.6.2 - /Users/zsh/.nvm/versions/node/v24.12.0/bin/npm
    pnpm: 10.26.2 - /Users/zsh/Library/pnpm/pnpm
  npmPackages:
    wxt: ^0.20.6 => 0.20.13

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[oyzamil]

This is a noticed bug in wxt. The UI mounts, but when the anchor is rendered again, the UI is removed and not added back again.

The proposed solution is to use a custom MutationObserver function that will handle the UI mount even if the anchor is changed or re-rendered.

Why to use Shadow Root?

Shadow Root is used to isolate the UI from the original DOM, and it's a best practice to use Shadow Root to avoid UI conflicts.

Solution:

import FloatToolbar from "@/components/FloatToolbar.tsx";
import ReactDOM from "react-dom/client";
import "~/assets/tailwind.css";

const ANCHOR = "body";

export default defineContentScript({
	matches: ["*://*.youtube.com/*"],
	cssInjectionMode: "ui",
	async main(ctx) {
		const ui = await createShadowRootUi(ctx, {
			name: "float-toolbar-ui",
			position: "inline",
			anchor: ANCHOR,

			onMount: (container) => {
				const root = ReactDOM.createRoot(container);
				root.render(<FloatToolbar />);
				return { root, container };
			},
			onRemove: (elements) => {
				if (elements?.root) {
					elements.root.unmount();
				}
			},
		});

		watchDomChanges(ctx, ANCHOR, {
			onAdd: () => {
				ui.mount();
			},
			onRemove: () => {
				ui.remove();
			},
		});
	},
});

function watchDomChanges(
	ctx: any,
	selector: string,
	callbacks: { onAdd: (el: HTMLElement) => void; onRemove: () => void },
) {
	let prevAnchor: HTMLElement | null = null;

	const observer = new MutationObserver(() => {
		const el = document.querySelector(selector) as HTMLElement | null;
		if (el && !prevAnchor) {
			callbacks.onAdd(el);
			prevAnchor = el;
		} else if (!el && prevAnchor) {
			callbacks.onRemove();
			prevAnchor = null;
		}
	});

	ctx.onInvalidated(() => observer.disconnect());

	observer.observe(document.body, {
		childList: true,
		subtree: true,
	});

	const initialEl = document.querySelector(selector) as HTMLElement | null;
	if (initialEl) {
		callbacks.onAdd(initialEl);
		prevAnchor = initialEl;
	}
}

Want to stick to your code?

If you don't like the above solution and you want to stick to your code, you just need to change the anchor in your code from body to html, as the HTML element is not re-rendered.

But make sure you fix your <FloatToolbar/> component styles first.

import FloatToolbar from "@/components/FloatToolbar.tsx";
import ReactDOM from "react-dom/client";
import "~/assets/tailwind.css";

export default defineContentScript({
	matches: ["*://*.youtube.com/*"],
	cssInjectionMode: "ui",
	async main(ctx) {
		console.log("Hello content.");

		const floatUi = createIntegratedUi(ctx, {
			position: "inline",
			anchor: "html",
			onMount: (container) => {
				const root = ReactDOM.createRoot(container);
				root.render(<FloatToolbar />);
				return root;
			},
			onRemove: (root) => {
				root?.unmount();
			},
		});

		floatUi.autoMount();
	},
});

Bonus Tip:
Building an extension for a website like YouTube, you also need to look into the wxt:locationchange hook.

ctx.addEventListener(window, 'wxt:locationchange', async ({ newUrl }) => {})

[zshnb]

thanks for your assistance, with shadowRootUi, is always need obverse for mount even thouth the anchor is body?