# Using web components in AU2?

**URL:** <https://discourse.aurelia.io/t/using-web-components-in-au2/3328>\
**Category:** vNext\
**Created:** [March 24, 2020, 11:28pm UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328 "2020-03-24T23:28:38Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 28, 2020, 11:13am UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/8 "2020-03-28T11:13:49Z")

</div>

The core of Aurelia for handling binding with various input elements is a list of predefined default behaviors built on top of extensible property-to-event handling model.

By this, I meant, by default, Aurelia is taught:

- how to deal with input text element **`value`** binding: use various events `change`, `input` etc [https://github.com/aurelia/binding/blob/0d5b8183a7933ad22bdff03870f90902580a519f/src/event-manager.js#L254](https://github.com/aurelia/binding/blob/0d5b8183a7933ad22bdff03870f90902580a519f/src/event-manager.js#L254)
- how to deal with input checkbox **`checked`** binding: use `change`, `input` event: [https://github.com/aurelia/binding/blob/0d5b8183a7933ad22bdff03870f90902580a519f/src/event-manager.js#L255](https://github.com/aurelia/binding/blob/0d5b8183a7933ad22bdff03870f90902580a519f/src/event-manager.js#L255)
- etc…

This shows we can teach Aurelia how to bind with any property of element via events, just like those built-in controls.

## Example

I’ve prepared an example here with 3 scenarios:

- DYI input element that communicate via a custom event named `my-input-change`
- Polymer `<paper input/>` element
- Polymer `<paper-checkbox/>` element

[https://gist.dumber.app/?gist=0e58778ce7bb54c20fc31d49547649c9&open=src%2Fapp.js](https://gist.dumber.app/?gist=0e58778ce7bb54c20fc31d49547649c9&open=src%2Fapp.js)

Beware that `<paper-input/>` from Polyer seems to only dispatch `change` event on `input` change event, which means you need to hit `Enter` key, or focus away from the input for the value to be reflected.

## Notes

1st note is while we can easily teach Aurelia how to bind with any element properties, it’s not easy to teach Aurelia how to interpret `.bind` command to two way or one way, that’s why you see in the demo that I explicitly used `.two-way` instead. It’s possible to teach Aurelia though it involves a bit of monkey patching so I’m not sure about doing it.

2nd note would be: this part is not well documented, so it would be awesome if you (or anyone) could help with that here [https://github.com/aurelia/documentation/tree/master/current/en-us/4.%20binding](https://github.com/aurelia/documentation/tree/master/current/en-us/4.%20binding) if you found it helpful 🍻😽

3rd note would be: this capability/behavior is kept in v2, so what you learn in v1 here will be reusable for v2

4th note would be: In case you missed it, awhile ago I created a topic showing how to do 2way bindign with scroll position here [# 17 Better know a framework: scroll position binding](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585). It’s based on the same observation mechanism you see above. The code is here: [https://github.com/aurelia/binding/blob/0d5b8183a7933ad22bdff03870f90902580a519f/src/event-manager.js#L281-L287](https://github.com/aurelia/binding/blob/0d5b8183a7933ad22bdff03870f90902580a519f/src/event-manager.js#L281-L287)

---

_[View the full topic](https://discourse.aurelia.io/t/using-web-components-in-au2/3328)._