Web components support

[RobinMalfait]

Currently there are multiple issues if you want to use Headless UI inside / with web components.
Instead of opening a few issues, I'm going to close all of them and link to this discussion.
This will be easier if we want to work on better web components support, that we have a single spot to refer to and have a discussion.

Here are a few related issues:

• [Bug]: Popover unwanted closing behavior (custom element / shadow dom) #864
• [Bug]: Popover not working inside Web Component #514
• [Bug]: Listbox in ShadowDOM Event Loss #835

---

This is not a promise that we will have full proper web components support, but I wanted to do some cleanup in general.

[yaakov123]

I seem to have a very hacky, but working solution. You can use it at your own risk.

/**
 *
 * @param shadowRootContainer - The HTML element that is the shadowRoot's parent
 * @param portalRoot - The HTML element that you want Modals to be teleported to
 * @returns
 */
export default function patch(
  shadowRootContainer: HTMLElement,
  portalRoot?: HTMLElement
) {
  const elementById = Document.prototype.getElementById;

  const element = portalRoot
    ? portalRoot
    : shadowRootContainer.shadowRoot?.children[0];
  if (!element) return;

  Document.prototype.getElementById = function (elementId: string) {
    if (elementId === "headlessui-portal-root") {
      const d = document.createElement("div");
      d.id = "headlessui-portal-root";
      element.appendChild(d);
      return d;
    }
    return elementById.call(this, elementId);
  };

  const activeElementDescriptorGetter = Object.getOwnPropertyDescriptor(
    Document.prototype,
    "activeElement"
  )?.get;

  Object.defineProperty(Document.prototype, "activeElement", {
    get: function () {
      const activeElement = activeElementDescriptorGetter?.call(this);
      if (activeElement === shadowRootContainer) {
        return shadowRootContainer.shadowRoot?.activeElement;
      }
    },
  });

  const targetGetter = Object.getOwnPropertyDescriptor(
    Event.prototype,
    "target"
  )?.get;

  Object.defineProperty(Event.prototype, "target", {
    get: function () {
      const target = targetGetter?.call(this);
      if (target === shadowRootContainer) {
        return this.path[0];
      }
      return target;
    },
  });
}

[yaakov123]

Worked for me :)

[schniper]

Thank you for this! I was using comboboxes in an embedded component and the options popovers would close at the first action (right click, left click / tap), without doing anything.
In order for everything to work properly, I had to add the following in the beginning of your function:
Document.prototype.getElementById = (id) => shadowRootContainer.shadowRoot.getElementById(id). Of course, I am doing this if I detect the component is embedded.

[onurbozkurt]

Worked for me, thank you.

[aakarim]

This doesn't work for me now, unfortunately. It seems like the Dialog node gets re-mounted to the root node. Perhaps something to do with

headlessui/packages/@headlessui-react/src/components/portal/portal.tsx

Line 98 in 676de16

if (!target.contains(element)) {

?

It also seems like the Portal logic uses ownerDocument in a lot of places where rootNode would make it compatible with shadow DOMs.

[dennisheiden]

It didn't work for me at all (looks like a timing issue), I just use an old school interval and it worked:

// patch tailwind portals
let r = 0, p = setInterval(function() {
	if(r > 100) clearInterval(p); // prevent endless loop
	const portal = document.getElementById('headlessui-portal-root'); // portal for modals
	const _shadow = host.shadowRoot?.children[0];
	if(_shadow && portal) _shadow.appendChild(portal) & clearInterval(p); // patch dom
	r++;
}, 200);

Edit: host is the div containing the shadow-dom. (mostly the app container)

[clord]

I could really use a subset of this functionality in our large react application. We have tailwind embedded into a larger project with shadow root to isolate overlapping classes. I would like to use headlessui too but the portals it creates go up into the root document instead of the nearest shadow root.

It would be so awesome to have an option to make portals go to the nearest shadow via this API if available: https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode

could look into a PR unless someone has an idea already.

[chinanderm]

@clord Did you happen to look into this?

[clord]

No, not yet

[animber0]

Hi, any help with the following? I'm trying to use your patch in the code found here:
(The NPM package "@samrum/vite-plugin-web-extension/client")

import browser from "webextension-polyfill";
import patch from "../../patch";

export default async function renderContent(
  cssPaths: string[],
  render: (appRoot: HTMLElement) => void
) {
  const appContainer = document.createElement("div");

  //
  // appContainer.setAttribute("style", "z-index: 10");
  //

  const shadowRoot = appContainer.attachShadow({
    mode: import.meta.env.MODE === "development" ? "open" : "closed",
  });

  const appRoot = document.createElement("div");
  
  //
  // appRoot.setAttribute("style", "z-index: 10");
  //

  if (import.meta.hot) {
    const { addViteStyleTarget } = await import(
      "@samrum/vite-plugin-web-extension/client"
    );

    await addViteStyleTarget(shadowRoot);
  } else {
    cssPaths.forEach((cssPath: string) => {
      const styleEl = document.createElement("link");
      styleEl.setAttribute("rel", "stylesheet");
      styleEl.setAttribute("href", browser.runtime.getURL(cssPath));
      shadowRoot.appendChild(styleEl);
    });
  }

  shadowRoot.appendChild(appRoot);

  //
   //shadowRoot.setAttribute("style", "z-index: 10");
  //

  document.body.appendChild(appContainer);

  render(appRoot);
}