Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support <slot> children when using as="template" #1548

Merged
merged 3 commits into from
Jun 3, 2022

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Jun 2, 2022

Many of the elements in Headless UI allow you to render fragments/templates but we will still modify the VNode that's inside it. This did not work in the case of <slot> because the placeholder isn't an actual element. We now resolve these internally before rendering and will still detect if the slot doesn't have a valid element that we can use.

We also handle this nesting recursively so there shouldn't be any problem with multiple levels of nesting with components that all use <slot>s.

Fixes #485

@vercel
Copy link

vercel bot commented Jun 2, 2022

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

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Jun 3, 2022 at 1:56PM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Jun 3, 2022 at 1:56PM (UTC)

@thecrypticace thecrypticace changed the title Support <slot> as a child when using as="template" Support <slot> children when using as="template" Jun 2, 2022
@thecrypticace thecrypticace force-pushed the fix/render-with-slots branch from cea376f to 820bdb8 Compare June 2, 2022 21:18
@3hafi

This comment was marked as off-topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Slot in PopoverButton
2 participants