Awesome

ember-component-attributes

This addon lets you easily bind HTML 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 (html-attributes foo=bar) as the last positional argument to your component:

{{#x-foo (html-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 (html-attributes id="main-bar" class="large" data-foo="123")}}

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

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

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

This addon is guaranteed to work with Ember 2.8 and up. It may work with older versions as well although the earliest working version is unknown.

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

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

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