Containerless button element sometimes works with delegate, sometimes trigger


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 click.delegate="onClick()"></button>

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


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.


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.