Allow <button> to be in nested components in <PopoverButton>

[thecrypticace]

We were previously checking for an HTMLElement directly but now will "pierce" the component tree if a Vue Component is used as a child of <PopoverButton> with as="template".

This resulted in us thinking the button didn't exist and clicks on it were considered outside which would close and then re-open the popover since the button being clicked was wired up to toggle it.

Basically, this didn't work before but now does:

<template>
  <Popover>
    <PopoverButton as="template">
      <ButtonWrapper>Not Working</ButtonWrapper>
    </PopoverButton>
  
    <PopoverPanel>
      <div>my content</div>
    </PopoverPanel>
  </Popover>
</template>

where ButtonWrapper is just:

<template>
  <button type="button">
    <slot />
  </button>
</template>

Since we pierce the component tree we're now able to get at the actual HTML element

Fixes #2713

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 30, 2023 4:18pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 30, 2023 4:18pm

[RobinMalfait]

Looks good to me!

We do indeed require the real underlying dom element instead of the component instance 💪