HeadlessUI within Shadow DOM

[rikkipitt]

Hey folks,

Loving the kit. I'm using HeadlessUI along with TailwindCSS in JIT mode within a Web Extension. The extension works in Chrome/Firefox/Safari etc.

Due to the nature of the extension, I'm placing a Vue 3 app within a Shadow DOM within an element on the page. This ensures that styles are not leaked to the parent page, and vice-versa.

The problem I'm encountering:
If I disable the use of the Shadow DOM, the dropdown component MenuButton can be clicked to show/hide perfectly - as in the demo. However, if the app is loaded within the shadow, the click event only opens the dropdown. A click to close looks to be instantly re-opening the MenuItems panel.

I've tried attachShadow({ mode: "open" }) and closed and I've tried delegatesFocus to no avail.

Just wondering if anyone else has experienced anything similar?

Cheers!

[rikkipitt]

This is tricky to explain, let alone set up, so I have put together two examples so you can see what's going on.

Working: https://codesandbox.io/s/awesome-meninsky-ul2cx
Not working: https://codesandbox.io/s/hidden-voice-0y6g0 (has the instant re-open issue when you click to close the menu)

[dickfickling]

@rikkipitt did you ever come up with a solution for this?