Easily bind attributes to your ember components
Switch branches/tags
Nothing to show
Clone or download
Latest commit 595f1ee Oct 5, 2017



Build Status

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.

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"}}

Supported Versions of Ember

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.