This addon lets you easily bind attributes to your ember components. It was inspired by the discussion in this rfc.

ember install ember-component-attributes

To bind an attribute foo to the value of bar, pass (attributes foo=bar) as the last positional argument to your component:

{{#x-foo (attributes style="margin-top: 10px") stuff=someStuff}}
  Sorry about the inline styles.
{{/x-foo}}

This helper also works with class and id attributes if you prefer to keep all your attributes together.

{{x-bar (attributes id="main-bar" class="large" data-foo="123")}}

Attribute bindings defined with the attributes helper will always win over attribute bindings that are defined on the class.

{{!-- The role will be "foo" --}}

{{x-bar (attributes role="foo") ariaRole="bar"}}

This addon is implemented with a naive Glimmer AST transform so you can't do fancy things like

{{my-component (if foo (attributes data-foo="true") (attributes data-bar="true"))}}

If this feature is accepted into the Ember core then we will consider removing this limitation.