Containerless button element sometimes works with delegate, sometimes trigger

Help Requests
1

Hey all,
I’ve built a custom element that’s a simple button component. I’ve made it containerless to not break styles/make markup more readable. The component dispatches a custom click event back to the parent to call its custom click.delegate function. This breaks for two uses of the button when it is the ‘save’ action in a dialog and I can’t figure out why. Changing to .trigger works but I dont see why I should have to use .trigger

//button-component. js
constructor(element) {
	this.element = element;
}

onClick() {
	this.element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
}

//button-component.html
<template>
    <button click.delegate="onClick()"></button>
</template>

//usage in mark up
<button-component click.delegate="save()">
    Save
</button-component>
2

At first glance, I’m not sure what the issue exactly is, but I think what you want to do (preserving the semantic and ease of style) can be easily solved with as-element:

<button as-element="button-component" click.trigger="...."></button>

Note that handler of .delegate / .trigger with no returning true will call event.preventDefault() on the click event.

3

Thanks @bigopon! I want the inner button to appear as a plain button not as a component in the mark up so I believe as-element is sort of the opposite. Unless I wanted to enforce ‘as-element’ being used wherever the component is used, which isn’t ideal.