# Why must bindable attribute be lowercase?

**URL:** <https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608>\
**Category:** Uncategorized\
**Created:** [June 2, 2019, 10:05pm UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608 "2019-06-02T22:05:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![will-moore](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/will-moore/32/1503_2.png) [@will-moore](https://discourse.aurelia.io/u/will-moore)\
**Post date:** [June 2, 2019, 10:05pm UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/1 "2019-06-02T22:05:25Z")

</div>

I have a simple html-only component. search-form.html

```
<template bindable="searchValue">
  Search Value: ${ searchValue }
</template>

```

Used like this:

```
<require from="./search-form.html"></require>
<search-form searchValue.bind="searchValue"></search-form>

```

But it seems the searchValue doesn’t get shown, unless I rename it searchvalue.  
Is there a reason that this must be all lowercase? Is this documented anywhere? It’s taken me quite a lot of time to work that out by trial and error.

Thanks, Will.

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [June 2, 2019, 10:11pm UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/2 "2019-06-02T22:11:16Z")

</div>

Hi, it doesn’t. Aurelia’s naming convention is kebab case. So you should use search-value.bind instead of searchValue.bind.

Regards.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [June 2, 2019, 10:40pm UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/3 "2019-06-02T22:40:16Z")

</div>

The lower case on tag and attribute came from XHTML standard, although HTML is not XHTML (outdated) and is designed to be forgiving. Aurelia’s convention mentioned by @ormasoftchile tries to follow the strict rule for better compatibility and future proof.

[http://www.htmlbasictutor.ca/html-tag-attributes.htm](http://www.htmlbasictutor.ca/html-tag-attributes.htm)

This rule is also turned on by default in htmlhint.

[https://htmlhint.io](https://htmlhint.io)

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [June 2, 2019, 10:44pm UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/4 "2019-06-02T22:44:29Z")

</div>

Ironically some attribute like viewBox in svg (which is XML) didn’t follow this rule. So those XML spec designers would not even follow their own convention, which tells me why people hate XML.

> **[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)**
>
> The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

Have a look of the complete list, a mess of mixed kebab case and camel case…

> **[SVG Attribute reference](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute)**
>
> SVG elements can be modified using attributes that specify details about exactly how the element should be handled or rendered.

---

<div class="post-metadata">

**Author:** ![will-moore](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/will-moore/32/1503_2.png) [@will-moore](https://discourse.aurelia.io/u/will-moore)\
**Post date:** [June 3, 2019, 11:13am UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/5 "2019-06-03T11:13:52Z")

</div>

Thanks for the responses. I just wonder if there’s a way of making this clearer. There’s no mention on [https://aurelia.io/docs/templating/custom-elements#bindable-properties](https://aurelia.io/docs/templating/custom-elements#bindable-properties) that bindable attributes are case sensitive. Under the “Custom Element Basics” there’s a nice info-box warning “This is not a limitation of Aurelia. It is HTML5 who doesn’t support self-closing syntax…”.  
Something like this to warn that bindable properties are case sensitive might (or might not) have saved me some pain. Or if the code itself threw some kind of error or warning (instead of failing silently)?  
I’m finding the learning curve a little steep just now so anything that helps would be nice.  
Thanks.

---

<div class="post-metadata">

**Author:** ![jeffgrann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeffgrann/32/43_2.png) [@jeffgrann](https://discourse.aurelia.io/u/jeffgrann)\
**Post date:** [June 3, 2019, 2:06pm UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/6 "2019-06-03T14:06:41Z")

</div>

If you watch Rob’s [Beginning Aurelia Development](https://vimeo.com/ondemand/beginningaurelia) video, your learning curve will be significantly reduced. Well worth the price of admission.

I also highly recommend his [Intermediate Aurelia Development](https://vimeo.com/ondemand/intermediateaurelia) as well.

The [Learn](https://aurelia.io/learn) section of [aurelia.io](http://aurelia.io) is your friend.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [June 4, 2019, 3:21am UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/7 "2019-06-04T03:21:14Z")

</div>

There is only one brief mention in aurelia doc. [https://aurelia.io/docs/cli/basics#generators](https://aurelia.io/docs/cli/basics#generators)

I agree this topic should be explained better…

---

<div class="post-metadata">

**Author:** ![will-moore](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/will-moore/32/1503_2.png) [@will-moore](https://discourse.aurelia.io/u/will-moore)\
**Post date:** [June 4, 2019, 10:39am UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/8 "2019-06-04T10:39:48Z")

</div>

Thanks for the links.

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [June 4, 2019, 11:06am UTC](https://discourse.aurelia.io/t/why-must-bindable-attribute-be-lowercase/2608/9 "2019-06-04T11:06:55Z")

</div>

This has kicked me recently after years of working with Aurelia