I have the following
<custom-component>
<div slot="form">
<form>
bunch of input elements
<span slot="inner"> <button type="submit" id="submitButton"></button> </span>
<button type="Reset"></button>
</form>
</div>
</custom-component>
How do I listen to on click event the button type submit from the parent component custom-component? For reasons that I'm not going to to into, making the whole slotted form a component is not an option.
In the custom component file, this is what I tried
<slot name='form' >
<slot name='inner' @click=${this.handleSearch}> </slot>
</slot>
It seems like you'll need to change a few things to make this work as intended.
First, the "inner" slot in your example isn't doing anything. You can't have a nested slot inside of light DOM rendered slot children. To test this out to see that this is true, you can try two things.
<slot name="inner"> element, and you'll see that the "Submit" button still renders just fine in HTML.@click listener on the <slot name="inner"> never fires. Try moving it to the <slot name="form"> and you'll see that the callback fires as expected.Another issue you'll run into is that the default browser Event being bubbled through the shadowRoot doesn't contain any information. If you console.log the data in the event callback, you'll see that all you get is {isTrusted: true} instead of the more useful event and element information.
Since you can't create the form within the web component, the other option is to just handle all of the logic with JavaScript in a <script> tag next to your <custom-component> in HTML. This makes sense since this is closer to the intended use of slotted children - to be able to add arbitrary HTML as children to your web components, but your web component isn't necessarily in charge of anything related to that HTML, it's just rendering it.
If you need to be in charge of the rendering, events, or logic related to the HTML children, they should be inside the web component, or else the logic needs to be handled outside of the web component.