# Static attributes to components

**URL:** <https://discuss.emberjs.com/t/static-attributes-to-components/10419>\
**Category:** Uncategorized\
**Created:** [April 13, 2016, 1:40pm UTC](https://discuss.emberjs.com/t/static-attributes-to-components/10419 "2016-04-13T13:40:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tixn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tixn/32/16479_2.png) [@tixn](https://discuss.emberjs.com/u/tixn)\
**Post date:** [April 13, 2016, 1:40pm UTC](https://discuss.emberjs.com/t/static-attributes-to-components/10419/1 "2016-04-13T13:40:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [April 13, 2016, 2:26pm UTC](https://discuss.emberjs.com/t/static-attributes-to-components/10419/2 "2016-04-13T14:26:57Z")

</div>

Currently to achieve what you’re looking for you’ll have to [customize the Component attributes](https://guides.emberjs.com/v2.5.0/components/customizing-a-components-element/#toc_customizing-attributes) by using attribute bindings and just manually defining the property/value. Ex:

```auto
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.

---

<div class="post-metadata">

**Author:** ![tixn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tixn/32/16479_2.png) [@tixn](https://discuss.emberjs.com/u/tixn)\
**Post date:** [April 13, 2016, 2:30pm UTC](https://discuss.emberjs.com/t/static-attributes-to-components/10419/3 "2016-04-13T14:30:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [April 13, 2016, 6:06pm UTC](https://discuss.emberjs.com/t/static-attributes-to-components/10419/4 "2016-04-13T18:06:47Z")

</div>

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).

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

```

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

```

---

<div class="post-metadata">

**Author:** ![tixn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tixn/32/16479_2.png) [@tixn](https://discuss.emberjs.com/u/tixn)\
**Post date:** [April 14, 2016, 7:00am UTC](https://discuss.emberjs.com/t/static-attributes-to-components/10419/5 "2016-04-14T07:00:29Z")

</div>

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.