Reopen component class to give a default CSS class name based on component name

1

When I create a component such as {{my-useful-abstraction}} I would love to just have a default element class name of .my-useful-abstraction given to that component.

On a similar note, I reopened the LinkComponent class to add a .link class to all of them by default. How might I get the current component name and use that to give each component a class of its dasherized name?

Ember.LinkComponent.reopen({
  classNames: ['link'],
});

Side question: Where would you expect additions of this nature to live in the project structure?

2

Not sure if this is exactly what you want but you could take a look at ember-component-css either for inspiration or to actually use in your project. It adds an auto-generated css class to every component, and also injects that name into each component so it can be used in component/template code.

3

Good point. I haven’t used that addon for a while. I’ll check out the source. Thanks.