# 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:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShawnTalbert](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shawntalbert/32/486_2.png) [@ShawnTalbert](https://discourse.aurelia.io/u/ShawnTalbert)\
**Post date:** [March 24, 2020, 11:28pm UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/1 "2020-03-24T23:28:38Z")

</div>

How do I use a vanilla web components in AU2? For example say I would like to use Stencil components in my Aurelia 2 app (e.g. Ionic5)? Is that supported/reasonable?

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [March 26, 2020, 4:17am UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/2 "2020-03-26T04:17:28Z")

</div>

You can already use web components in Aurelia 1. There are no differences (that you need to worry about, at least) in v2 regarding using web components.

How do you expect to use your Stencil components? Are they already built and you only put the result web components into Aurelia template (simple)? Or are you looking to integrate more tightly with Stencil (i.e. write Stencil code in your Aurelia project and build them together)? Or mix Stencil components and Aurelia components (urgh… what?)?

---

<div class="post-metadata">

**Author:** ![ShawnTalbert](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shawntalbert/32/486_2.png) [@ShawnTalbert](https://discourse.aurelia.io/u/ShawnTalbert)\
**Post date:** [March 26, 2020, 4:29am UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/3 "2020-03-26T04:29:36Z")

</div>

The promise of ‘standard’ web components it to be able to mix,match and use them however you like, otherwise why bother standardizing?

So indeed, I’d expect mixing _any_ web-standard-compliant components into my templates should be simple and supported. Noting that the standard is fairly light in terms of capability.

My hope is web components can be consumed without modification in an Aurelia app and that Aurelia address how to make them fit as naturally as ‘native’ Aurelia components.

Has anyone an example app using a popular web components library inside an Aurelia project?

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [March 26, 2020, 4:23pm UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/4 "2020-03-26T16:23:08Z")

</div>

If you use the `dist` (already built into Web Components) of any UI / components library in Aurelia template, use them exactly how you would built-in HTML elements. I have done it, but I can’t share the code since it’s a company private UI framework.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 26, 2020, 5:42pm UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/5 "2020-03-26T17:42:28Z")

</div>

Here is an example for Angular. I guess you just need to skip the last step. [https://github.com/alesgenova/stenciljs-in-angular/blob/master/README.md](https://github.com/alesgenova/stenciljs-in-angular/blob/master/README.md)

---

<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 27, 2020, 3:51am UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/6 "2020-03-27T03:51:23Z")

</div>

If you are wondering about binding with custom element, then I can give some examples I think. But generally, webcomponent custom element is not too much different compared to normal HTML element

---

<div class="post-metadata">

**Author:** ![ShawnTalbert](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shawntalbert/32/486_2.png) [@ShawnTalbert](https://discourse.aurelia.io/u/ShawnTalbert)\
**Post date:** [March 27, 2020, 3:30pm UTC](https://discourse.aurelia.io/t/using-web-components-in-au2/3328/7 "2020-03-27T15:30:27Z")

</div>

Yes @bigopon, binding is probably the biggest concern I have. Two-way binding in particular. Web components still rely on the vanilla event model to inform of changes, correct? I’d rather not write a bunch of event handlers by hand a la 1993. I’m hoping I can do easy, declarative two-way binding on elements with user interaction like form inputs, even if those elements are fancy web components?

---

<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)