Inline CSUI Component + ShadowDOM not rendering elements that enter DOM tree later, correctly.

[ConnectWithNoor]

What happened?

This is my first time using Plasmo to build browser extension. So far the experience has been good except for the thing that is causing the unexpected behavior of CSUI.

I'm using Shad-cn as the UI Library and React.JS. (I've confirmed with shad-cn and it works as expected in standalone react app)

I've created inline anchor so that my content script UI renders next to a target element. Within the content script, I have a Select input, which behaves like a dropdown and opens as the user click it. As soon as user clicks over it, the dropdown cuts to the bottom of the extension going outside of the extension as you can see in the screenshot attached.

• Points to consider
  1 - The Select dropdown isn't available in DOM and enters in the DOM tree after user clicks the element.
  2 - The select dropdown options doesn't take styles that are provided after it enters the DOM.
  3 - The Select dropdown option renders outside of the extension widget, overflowing with the webpage.

Assumption is that the same will happen with Modals, Dropdowns and any element with such nature.

Important code snippets:

// content-script.ts
export const config: PlasmoCSConfig = {
  matches: ["https://www.youtube.com/*"]
};

const INJECTED_ELEMENT_ID = `#secondary-inner.style-scope.ytd-watch-grid`;

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
  element: document.querySelector(INJECTED_ELEMENT_ID),
  insertPosition: "afterbegin"
});

export const getShadowHostId: PlasmoGetShadowHostId = () => `plasmo-inline`;

function MainUI() {
  return (
    <Provider>
      <Extension />
    </Provider>
  );
}

// model-selector.tsx
 <Select
        value={summaryModel.value}
        onValueChange={(value) =>
          setSummaryModel(models.find((model) => model.value === value))
        }>
        <SelectTrigger className="w-fit space-x-3">
          <SelectValue placeholder="Model" />
        </SelectTrigger>

        <SelectContent position="popper"> // this is the part which act as a dropdown option that is causing the issue.
          <SelectGroup>
            {models.map((model) => (
              <SelectItem key={model.value} value={model.value.toString()}>
                <div className="flex flex-row items-center">
                  <div className="mr-2"> {model.icon}</div>
                  <p>{model.label}</p>
                </div>
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>

Maybe, this is a known issue and/or have a valid solution already to this problem. Either ways, I'll appreciate the solution to this.

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[ConnectWithNoor]

@louisgv