Static attributes to components

1

How do I specify attributes the component element has to have that do not change with every new instantiation of the component?

Like, a toggle component should always have aria-role='checkbox'. This is not depending on any property or component attribute the template should pass in.

I found the section on attribute bindings in the “Customizing a component’s element” section of the docs; but I don’t want a binding to a property, I want the element to just always have a specific set of attributes with a specific set of values.

2

Currently to achieve what you’re looking for you’ll have to customize the Component attributes by using attribute bindings and just manually defining the property/value. Ex:

export default Ember.Component.extend({
  attributeBindings: ['aria-role'],
  'aria-role': 'checkbox'
});

Yes, technically someone could overwrite the value {{foo-bar aria-role="baz"}}, but that’s something Ember will be fixing in the future.

3

Yep, that’s what I’ve been doing up to now. I just thought there should have been an easier way (and, really, there should be), so I asked.

Thanks.

Edit: Ah, and of course one can use the didInsertElement hook to apply classes and attributes, but I like the above more declarative solution better. Still, that’s what I’ve been doing before I did the attributeBindings thing.

4

Another option would be to make a “tagless” Component that renders a “root” element within its’ template (which has the attribute set). You could loose access to the Component DOM element in that case (this.$() may or may not work).

// app/components/foo-bar.js
export default Ember.Component.extend({
  tagName: '' // Will not emit a <div>
});

{{!-- app/components/foo-bar.hbs --}}
<div aria-role="checkbox">
  {{yield}}
</div>
5

Yes, thanks; that’s also a nicer approach to this.

Still, somehow it bothers me that you can’t do it more easily and more within the usual approaches to components.