Ember customize id attribute of component

Question

Hi is there a way to customize the id of a component (i know it can be done for views ...but views have be deprecated since ember 1.13):

E.g. the following worked for the view:

export default Ember.View.extend({
    classNames: ['music-js', 'vjs-default-skin', 'center-x','center-block'],
    attributeBindings: ['id'],
    id: 'musicOne',

However when I attempt to use id binding for the component i get the exception in the console logs:

export default Ember.Component.extend({
    classNames: ['music-js', 'vjs-default-skin', 'center-x','center-block'],
    attributeBindings: ['id'],
    id: 'musicOne',

Uncaught TypeError: The element or ID supplied is not valid.

Answer 1

2 ways:

In the component itself:

export default Ember.Component.extend({
  elementId: 'the-id'
});

Or specifying it in the component call itself:

{{my-component id="the-id"}}