Using web components in AU2?

vNext
1

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?

1 Like
2

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

1 Like
3

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?

1 Like
4

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.

1 Like
5

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

1 Like
6

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

7

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?

1 Like
8

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:

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

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 if you found it helpful :beers: :kissing_cat:

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

4 Likes