Aurelia webcomponents

I’m looking for a framework to make reusable components for any frameworks. I was searching about inserting a standard webcomponent to an aurelia app, and I found this : https://github.com/aurelia/web-components
I have no idea what this tool is made to, I see this had not been updated since one year, but I love the description : “A plugin capable of transforming Aurelia components into standards-compliant Web Components.”

Is this working ? Where can I found some doc to use it ?

1 Like

Welcome to Aurelia community,

Yes, Aurelia provides exactly what you want. I would strongly advise you to start studying Aurelia, you will not regret it. We will be very pleased to have good programmers on our side.
But on the subject you are asking, the following resources are available:

Aurelia Doc specially Templating
Aurelia Collected Tutorials specially Templating & User Interface sections
Beginning Aurelia
Learning Aurelia
Aurelia Awesome specially Aurelia Plugins

As far as I’m aware this is still on the roadmap but under development.

Ok ! Is there anywhere some doc or blog post where I can start experimenting the tool ?

Hey. It’s funny before some days I wrote a small blog article about webcomponents in Aurelia.
Important insight here is that it seem to be right now only possible to use native web components in Aurelia with the JSPM skeleton. This is because the aurelia-html-import-template-loader plugin only works with Systemjs.

Where we used native web components the setup looked like this. Right now we switched to Preact as the component layer because it has fewer trade offs.

PS: I also added a project which should be a working example.

I am also interested in the progress of the aurelia/web-components repo! It says it transforms Aurelia Components into standards-compliant Web Components. That’s exactly what I am looking for!

@fragsalat describes in his blogpost the other way around. How to use Webcomponents inside an Aurelia App.
And for Preact I need to have some kind of bootstrapper to handle the import and render calls. As stated on MDN

An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page.

What is the Aurelia way for this? What is the roadmap for this repo? How can I participate?

I think the new aurelia.io site has used interesting features of aurelia, like Progressive Enhancement . Hopefully someone responds to my post https://discourse.aurelia.io/t/architecture-of-aurelia-io . I think this goes in the right direction. But Webcomponents would be even better I think.

Well you there are 2 scanerios - compiling Aurelia components into “standard” web components, and using “standard” web components inside Aurelia app.

As far as I understand, @hadrienl is concerned about the first one and I don’t know about any progress or docs available.

But the second one is quite easy. You don’t need any special stuff, or Aurelia processing. Simply place your components as you would if you haven’t used Aurelia and it should work. You can bind attributes if you want or project something inside your component’s element if you need.

As far as I recognized it, you have to respect some things. Instead of working with attributes you have to provide getter and setter for the properties becuase Aurelia bind to the instance directly instead of rendering the value to the DOM so that the attributeChangedCallback could handle the value.

Yes Aurelia works with props, not attribute. Here is an example of WC and Aurelia, just in case you wanna test

Thank you for your answers. I’m interested in the two faces : creating webcomponents from aurelia codebase, but also importing webcomponents in a aurelia app. Maybe we should focus on the first part in this thread and open a new thread to learn how to integrate webcomponents in Aurelia (I’ll do it now because I failed).

So, for now, it’s not possible, but maybe in the future. :crossed_fingers:

I am referring to Roadmap 2018 Web Component Export. Has anyone a clue how aurelia-web-components is supposed to be used?

It’s Aurelia runtime + web components

@bigopon What do you mean with Aurelia runtime + web components? Shouldnt I be able to export an aurelia Eleemnt as webcomponent with this lib?

@sean.hunter.aus is (as one would expect) correct - this part of Aurelia framework is a bit stale, but this last update indicates that is not abandoned :smile:

1 Like

@adriatic, your link seems to be broken. Can you please fix it?

Sorry - I lost the context (and Aurelia, more broadly) completely :cry:

I started the transition to syncfusion native JS controls. I made my own wrapper for the control that I needed. Sadly their pure JS controls aren’t as feature complete as the jquery ones. I want to be done with Kendo