Stencil Js, Submitting a form using a custom button

Question

I have a custom web element (my-button) created with stencil js with shadowDom.

<form>
  <input type="text" name="field1"/>
  <input type="password" name="field2"/>

  <my-button type="submit">click me</my-button>
</form>

If i click "Enter" key in any of <input> fields - onsubmit event must be fired. But this doesn't happen if <my-button> uses shadowDom. Without shadowDom it works as a typical <button type="submit"> .

Is there a way to make <my-button> with shadowDom works as native <button type="submit"> ?

Found few solutins here Submitting a form using a custom button using HTML Web Components but the first solution is for native web elements (didn't find how to imlement the same in Stencil Js), the second solution doesn't work in Safari since Safari doesn't support is attribute so far.

Answer 1

The two main options I've seen:

1. Don't use Shadow DOM on that component. Stencil has an option for scoped styles which will prevent the styles from affecting anything outside the component but the style can be changed from outside.
2. Add a hidden native button element as a sibling of the web component in your component's connectedCallback . This preserves the advantages of using Shadow DOM but it does "leak" HTML which might become a problem.

The ideal solution would be for Stencil to support formAssociated() . There is an open issue (including a first implementation and workarounds from the great @johnjenkins), give it a thumbs up if you'd like to see it: https://github.com/ionic-team/stencil/issues/2284