Replies: 2 comments
-
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 |
Beta Was this translation helpful? Give feedback.
0 replies
-
@rikkipitt did you ever come up with a solution for this? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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 theMenuItems
panel.I've tried
attachShadow({ mode: "open" })
andclosed
and I've trieddelegatesFocus
to no avail.Just wondering if anyone else has experienced anything similar?
Cheers!
Beta Was this translation helpful? Give feedback.
All reactions