LitElement prevents form submit event from bubbling

[burakhanalkan]

Description

On the parent element, it is not possible to listen for the 'submit' event fired by the child element.

Live Demo

lit-element example: https://jsfiddle.net/ao9u3tsw/2/
Pure js example: https://jsfiddle.net/arjv9kt1/

Steps to Reproduce

1. Create 'child-element' rendering 'form' element
2. Create 'parent-element' rendering 'child-element'
3. Add 'submit' event listener to 'child-element' in the template of 'parent-element'

Expected Results

The event listener function to be called.

Actual Results

The event listener function is not called.

Browsers Affected

• Chrome

Did not check for the rest.

• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• lit-element: v2.2.1

[justinfagnani]

This isn't a LitElement issue. The problem is that the input and the event listener are in different shadow roots, but submit is not a composed event.

You'll need to re-fire the event from the child component, use the form participation API, or take the input and submit button as slotted children.

[BalusC]

or take the input and submit button as slotted children

Excuse me, can you elaborate this with a concrete example? Because even then it didn't work for me. I actually have this exact use case from the beginning on, using slotted children, but I'm still facing the issue of the submit event apparently not hitting the form element itself when triggered by a slotted input or button. Here's the reproducer: https://jsfiddle.net/nhxuLpc6/

[justinfagnani]

@BalusC in that example your form and input are in different shadow roots.

Form associated custom elements may help you here

[christophe-g]

Potentially related: WICG/webcomponents#1075

[BalusC]

in that example your form and input are in different shadow roots

What exactly did you mean then when you said "take the input and submit button as slotted children"? Because I understood that my exact example already represents that.

[justinfagnani]

I mean slotting the input and button into the custom element, from where the form is:

<form>
  <my-element>
    <input slot="input" type="text">
    <button slot="button" type="submit">Submit</button>
  </my-element>
</form>

[BalusC]

Right. Thanks.