How can I recreate a button that triggered a normal form submit event when clicked?

[huvber]

I'm creating a generic DS that can be used with other framework. I'm struggling to recreate normal element like input or button. Specifically I would like to have a custom component that behave exactly like a button and so when mounted in a form, if clicked, will trigger the submit event.

[UpperCod]

Hi @huvber . An excellent topic to discuss. With Atomico, you can achieve it, and to make it easier, we have certain utilities like useRender. This hook allows you to render a fragment in the lightDOM separately from what you render in the ShadowDOM. This is useful for achieving the effect you mentioned. I'm attaching documentation on this and an example of your goal.

1. Documentation : https://atomico.gitbook.io/doc/guides/atomico-design-patterns/webcomponents-with-hybrid-rendering#what-are-the-benefits-of-using-userender
2. Example: https://stackblitz.com/edit/example-form?file=src%2Fmy-button.tsx,index.html,src%2Fmy-input.tsx

I hope it is useful to you and I will be attentive to what you need.

[huvber]

Thanks a lot for the reply, it works like that. I found a little odd the need to declare 2 different elements, but I understand the reasons.

Thanks a lot for the example again!