# Custom HTML attribute value is not bound

**URL:** <https://discourse.aurelia.io/t/custom-html-attribute-value-is-not-bound/3091>\
**Category:** Help Requests\
**Created:** [November 26, 2019, 2:13pm UTC](https://discourse.aurelia.io/t/custom-html-attribute-value-is-not-bound/3091 "2019-11-26T14:13:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fnzr](https://avatars.discourse-cdn.com/v4/letter/f/e5b9ba/32.png) [@fnzr](https://discourse.aurelia.io/u/fnzr)\
**Post date:** [November 26, 2019, 2:13pm UTC](https://discourse.aurelia.io/t/custom-html-attribute-value-is-not-bound/3091/1 "2019-11-26T14:13:38Z")

</div>

Reproduced here: [https://codesandbox.io/s/aurelia-javascript-sandbox-0edzk](https://codesandbox.io/s/aurelia-javascript-sandbox-0edzk)

I’m trying to bind a value to a custom HTML attribute. I have an array like `pages = [{ num: 1, url: "foo"}]`  
In my view, I have the following template:

```auto
<template>  
  <template repeat.for="page of pages">
    <div class="myclass" pagenumber.one-way="page.num">
      <div class="mydiv">${page.num}</div>
    </div>
  </template>
</template>

```

In the sandbox, you can see that “mydiv” has the proper inner text, so the binding is working properly

```auto
> document.querySelector('.mydiv').innerText
<< 1

```

Trying to access the custom attribute gives me null:

```auto
> document.querySelector('.myclass').getAttribute('pagenumber') 
<< null

```

I couldn’t find anything in the docs regarding custom HTML attributes, is there any special syntax? What am I missing?

---

<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:** [November 26, 2019, 4:07pm UTC](https://discourse.aurelia.io/t/custom-html-attribute-value-is-not-bound/3091/2 "2019-11-26T16:07:03Z")

</div>

From what I’m seeing in the sandbox, you are not [using Aurelia to create a custom attribute](https://aurelia.io/docs/templating/custom-attributes#simple-custom-attribute). Also see [Can I add a custom attribute to an HTML tag?](https://stackoverflow.com/questions/1735230/can-i-add-a-custom-attribute-to-an-html-tag#1735268) on [StackOverflow](https://stackoverflow.com).

What are you trying to do with the pagenumber attribute on the div element?

---

<div class="post-metadata">

**Author:** ![fnzr](https://avatars.discourse-cdn.com/v4/letter/f/e5b9ba/32.png) [@fnzr](https://discourse.aurelia.io/u/fnzr)\
**Post date:** [November 26, 2019, 4:37pm UTC](https://discourse.aurelia.io/t/custom-html-attribute-value-is-not-bound/3091/3 "2019-11-26T16:37:37Z")

</div>

Ah, I see. I have to prefix the custom element with `data-`. I’ve never seen these html validations being enforced so it didn’t even cross my mind.

The div will also have a click event, and I’ll use the pagenumber to do some processing. I know I could just attach the pagenumber to the div id or something along these lines, but creating a dedicated attribute just seemed more straightforward.

Creating a custom attribute with aurelia just seemed overkill, although it’s probably the more correct way. I’ll look into it.  
Thanks for the help

---

<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:** [November 27, 2019, 10:32pm UTC](https://discourse.aurelia.io/t/custom-html-attribute-value-is-not-bound/3091/4 "2019-11-27T22:32:17Z")

</div>

Glad you figured it out.

---

<div class="post-metadata">

**Author:** ![deap82](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/deap82/32/203_2.png) [@deap82](https://discourse.aurelia.io/u/deap82)\
**Post date:** [December 1, 2019, 8:46am UTC](https://discourse.aurelia.io/t/custom-html-attribute-value-is-not-bound/3091/5 "2019-12-01T08:46:29Z")

</div>

In your click binding you could just pass the value along in the function call:

`<div click.trigger="someFunc(page.num)">`

(if you’re at all concerned about accessibility you should choose to use a link or a button for anything that has a click event, that will make the element tabbable and “clickable” out of the box also for keyboard users)
