Right approach to trigger action on entire component template

Design
1

Is there a way to attach the {{action}} of a component to the entire component template? ie the wrapper element that ember will put the component into? I don’t see such a way in the docs.

Use case:

I’m using Semantic UI as a front end UI library in an ember app. I have a collection, which I have created as a component. Each item in the collection is a separate sub-component. But here is where I hit a problem.

To retain cascading styles, the entire component must be a direct descendent of the parent. ie: .parent.collection > .child.item { .... }

I realize I can set tagName and classNames to make it the child styled, but how can I also make the entire component clickable? I don’t want to I nest the {{action}} into a wrapper in the template because the extra level of nested element affects the styling due to the s structure above and I don’t wish to re-write the classes.

?

2 
{{my-component action='foo'}}

click() {
  this.sendAction();
}
3

Thank you sir.

I’m not sure why I didn’t find this in the docs:

Component doesn’t list this method, it extends View, which doesn’t list this method, which extends CoreView, which also doesn’t list this method … etc down the chain.

Do you happen to know if there are docs for this? - can all the actionable methods available to template be listed in the component as non-actionable (‘core’) methods?

4

Found it: Sending Actions from Components to Your Application - Components - Ember Guides