Is it possible to change the tag of the visually hidden MainTreeNode?

[svale]

In the latest versions of Headless UI there is a hidden div injected into all instances of the Popover component. I think perhaps it is a change introduced in #2634 with the MainTreeNode :

In our Next application, this introduced a lot of DOM nesting issues as we are attaching Popover to text paragraphs (<p / >) and the rendered DOM-structure looks like this (simplified):

<article>
  <p>
    <span data-headlessui-state="">
      [Text]
      <button data-headlessui-state="" id="headlessui-popover-button-:r6:">[Btn]</button>
    </span>
    <div style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"></div>
  </p>
</article>

Specifically we are seeing

Warning: Expected server HTML to contain a matching <div> in <p>.

and

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

And in turn a set of hydration errors

Does anyone know of a workaround or if it is possible ta pass another tag (e.g. <span>) to the component that is inherited by the hidden element?

Thanks!

[jameyg]

Hey @svale, I've found that it actually seems to have been introduced in version 1.7.15. The version before, 1.7.14, works fine without these hidden elements appearing everywhere.

Maybe it's this line in #2492:
https://github.com/tailwindlabs/headlessui/pull/2492/files#diff-887b16418d08f2a0244dbe2c80593ed1c359205992256b024534f4345be79397L394