Potential solution and causes to shadcn/radix component issues

[pact0]

Hello, I've been rewriting my extension using a bit more modern stack and I ended up using this framework and tailwind + shadcn components. I've almost instantly noticed that some of the styles work and some don't for shadcn. I've spent some time debugging it and found out why so I might as well share.

This seems to be an issue only in the content scripts. Some of the simple components like button or label work just fine, but dropdown doesn't.

Here is a reproduction repo which is some random starter with added components https://github.com/pact0/reproduction . When you look at the sidepanel entrypoint it uses the same dropdown as content script and in sidepanel the component is styled correctly in content script it is not.

The issue is shadcn uses radix undearneath which uses a concept called Portals to render things like dropdowns https://www.radix-ui.com/primitives/docs/utilities/portal in the documentation it says that it appends to the document.body by default and this is the culprit. When injecting the content script we create the shadow root which holds all the css we need. but the portaled components don't have access to them since the live in the root body.

Here is also a temp solution commented out which makes it work https://github.com/pact0/reproduction/blob/main/src/entrypoints/content/index.tsx just adding our styles to the original website, which is pretty bad, but works.

The ideal solution would be for shadcn to expose the portal custom container api somehow and allow us to change where these components get appended. I've seen a bunch of people ask about this issue and haven't seen anyone mention why this is happening. I hope this helps to somehow fix this

[nishu-murmu]

This problem is same with any other UI component library. Like for example I've grown fond of headlessui components, I use that a lot, this package also has Dropdown like component known as Combobox, when I wanted to configure this in my content scripts, I also faced this same issue.

From what I've debugged and scour through the github issues,
There is one work around
i.e. to use MutationObserver and listen to the DOM changes for the portal, and move the portal element in the shadow DOM of the content scripts.

Edit:
Apparently they fixed it in headlessui with this PR.

[pact0]

Would be nice to spread the awareness and have shadcn team fix this issue as well, because currently injecting the styles to the main document works,but messes up original website styles most of the time ;/

[nishu-murmu]

Don't inject styles to main document, cause different websites will have different styling, for sure, it will break the styling.
For temporary workaround, please use MutationObsever.

And yeah, someone should create a github discussions or issue in the shadcn community.

[pact0]

do you maybe have an example how can I move it to the shadow dom?

[nishu-murmu]

I tried to make it work with the reproduction repo you sent.
Styling works but behaviour got messed up.

Here is the code snippet

export function customMutationObserver({
  callback,
  targetElem,
  options,
}: CustomMutationObserver) {
  const observer = new MutationObserver((mutations) => {
    callback(mutations, observer);
  });
  observer.observe(
    targetElem || document.body,
    options || {
      childList: true,
      subtree: true,
    }
  );
}

customMutationObserver({
    callback: async (list, observer) => {
     // replace this with the portal element for radix
      const portalRoot = document.querySelector('#headlessui-portal-root');
      // root elem of content scripts injected
      const dropdown = document.querySelector(
        'enacton-crm-assignee-dropdown'
      );

      if (portalRoot) {
        dropdown.shadowRoot?.appendChild(portalRoot);
        portalRoot.remove();
        observer.disconnect();
      }
    },
  });

[aklinker1]

https://wxt.dev/guide/resources/faq.html#my-component-library-doesn-t-work-in-content-scripts

Very similar to this, but instead of styles being outside the shadow root, elements are being placed outside the shadow root.

Doesn't look like Shadcn documents how to change this, I guess you need to provide your own solution on top of it.... But you say it's not possible? Doesn't Shadcn just download component code, can't you just change the portal container properly?

The simplest thing would be to use react context to provide the element to add portals to.

[pact0]

That's what also crossed my mind, I'll try to have a look at this, thanks for the suggestions