bug: problematic interaction between Astro Islands and navbar class

[kaytwo]

What version of daisyUI are you using?

v4.6.1

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://stackblitz.com/edit/daisyui-astro-us2kgv

Describe your issue

As per withastro/astro#9957:

When integrating Tailwind CSS and DaisyUI in a project, embedding a framework-specific component within a div element assigned the "navbar" class—utilizing the client:only directive—results in an unexpected outcome where raw JavaScript code is displayed. This issue appears to be specifically triggered by the presence of the "navbar" class

This happens because Astro injects its Islands directly as a set of three tags: a style, a script, and an <astro-island>. Since the navbar uses the selector:

:where(.navbar > *) {
  display: inline-flex;
  align-items: center;
}

This causes the injected script and style tags to be given a visible display property, which messes everything up.

My current workaround is: https://stackblitz.com/edit/daisyui-astro-fmyw1d?file=src%2Fglobal.css although (a) it would be great if DaisyUI prevented this from happening by default, and (b) I'm not good enough with css to be confident that this is a proper fix for the problem.

While this issue happens with Astro, in theory anyone who put a <script> tag in their navbar would run into the same problem, as idiosyncratic as that might be. So while it will definitely happen more often with Astro, I do not believe it is not specific to this framework. FWIW, they wontfix'd it saying it's a problem with DaisyUI's styles.

[github-actions]

Thank you @kaytwo for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

I really like Astro. But injecting style and script tags in between DOM elements is questionable 💀

I will try to change the selector to avoid selecting those tags.