Prefer incoming data-* attributes, over the ones set by Headless UI

[RobinMalfait]

Typically when Headless UI components set certain props on a component, then they are there to make sure that the component behaves as expected. E.g.: aria-* attributes, role attributes, tabIndex, etc.

However, we also provide helpful data-focus or data-hover attributes that make styling components easier. These attributes are not necessary to make the component behave as expected.

This brings us to the problem that this PR solves. Sometimes when you use one of Headless UI's components, and you provide your own component that already contains the same data-* attributes, then your attributes will be overridden.

This PR solves that and prefers the existing data-* attributes over the ones we set in Headless UI.

This is currently only implemented when you can't really control the props when using as={Fragment}.

<MenuButton as={Fragment}>
  <button data-hover={hovered}>My menu button</button>
</MenuButton>

In this scenario the data-hover based on the hovered variable that can come from anywhere will be preferred compared to what MenuButton provides.

[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	Mar 14, 2024 3:31pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 14, 2024 3:31pm