How Radix UI asChild feature can be implemented in Svelte?

[raythurnvoid]

https://www.radix-ui.com/primitives/docs/guides/composition#composition

The use case is pretty simple, you have a Button component, you want to reuse it perhaps to trigger a Dropdown, you don't want to manually define all the accessibility requirements for buttons that trigger dropdowns everytime so you create a DropdownTrigger component that is meant to wrap any kind of button and listen to the proper events and add the proper aria-attributes.

I've been trying to figure this out for a while now (since Svelte 3), and i don't see any proper way of achieving this that doesn't end up in manually using querySelector, mutation observers (in case the original button is replaced with another button component), or some weird prop binding gymnastic.

If i had a magic wand i would ask 3 features to achieve this:

• Listen for mount/unmount of snippets (children components). This will allow to avoid mutation observer.
• Read the root element (or elements in case there's more than 1) from a snippet. This will allow me to listen for events and append attributes in a programmatic way
• Be able to use the declarative template to set event listeners and set attribute on an element defined in the script. This would enhance the point above and let svelte do all the boilerplate code

Or maybe i'm completely on the wrong way and the actual "best practice" would actually be to go with querySelector and mutation observer and do everything manually. I may understand this choice since these features would be mostly used by libraries and not by regular users. It just seems inefficient that svelte already knows when elements are mount/unmounted and i would need to re-write the same code but worse because mutation observer are async.

[david-plugge]

Hey, i actually found a solution to this problem!
https://svelte.dev/playground/9ef563516cde4a0aae12c13b5205fe7e?version=5.16.0

Let me know if you have any questions.
I would really like to get some feedback from a svelte team member to validate my approach.

[raythurnvoid]

Hacking around the snippet interface! This approach looks promising I will definitely try it

[ambethia]

https://www.divotion.com/blog/how-to-create-an-aschild-prop-in-svelte-5

[david-plugge]

That is a nice article but you still need to pass in a snippet which is what at least i would like to not have to do. But that is likely too much magic. Shadcn svelte does it in a similar way If i remember correct

[raythurnvoid]

Yeah passing a snippet is what you are trying to avoid if you are implementing asChild, the snippet will force the user to perform a mapping from snippet parameters to its own component, and its own component needs to support all the needed props in input to set the aria attributes, events etc.

Not great for a component library, too much boilerplate on user side.

I would also argue that the hack above is much easier to read/maintain than all this snippets/proxy one on top of each other.

[david-plugge]

Its Important to note that my hack does not work for ssr. Of you want to assign attributes in the server, you are pretty much forces to use a snippet