Overview

I'm new to Solid.js and am looking for a way to add multiple event handlers to the same HTML element from different components in JSX. This is simple to do in Vue but it appears that events are overridden in Solid.js depending on how the event is added. I've created an example in both where Vue behaves the way that I'd expect (adding multiple event handlers) but Solid overrides given events if more than one is provided for a single event.

You can compare behaviors with this example by toggling useDivAsComponent in Solid and useDivAsComponent in Vue. Vue behaves the same regardless of whether multiple event handlers are added to a component or HTML element. Solid's behavior changes depending on if events are added to an HTML element or another component.

Is there a way to easily add multiple event handlers to the same HTML element through different components (defined with JSX) in Solid?

Extra Details

I have a component where I'd like to add DOM event handlers to the root element. However, I'd like for someone using that component to be able to add their own DOM event handlers to the component too.

If the root element of the component is (props) => <div {...props} /> then only event handlers inside the component are used (if an end-user of the component adds their own, they will be overridden). When you look at Solid's built code, props are merged so it makes sense that only one the last handler is kept (I would expect Solid to use addEventListener instead).

However, if the root element of the component is a regular <div /> then Solid generates code where event handlers are added so both event handlers are kept. If you look at Solid's built code, Solid uses addEventListener()as I would expect.

Alternative Solutions

As a workaround, I could pass a reference to the inner component (<InnerComponent ref={ref} />) to the parent and manually add event listeners to avoid additional events being overridden (ref.addEventListener(...)). However, this isn't quite as convenient as other frameworks.

I could also make sure that the inner component where event handlers are added is a regular <div /> so that Solid's compiler generates code that adds event listeners rather than merging (and overriding) event handler props.

I'd love to find a way to add multiple events in JSX if possible.