# Aurelia webcomponents

**URL:** <https://discourse.aurelia.io/t/aurelia-webcomponents/342>\
**Category:** Uncategorized\
**Created:** [November 9, 2017, 3:14pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342 "2017-11-09T15:14:52Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![hadrienl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hadrienl/32/141_2.png) [@hadrienl](https://discourse.aurelia.io/u/hadrienl)\
**Post date:** [November 9, 2017, 3:14pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/1 "2017-11-09T15:14:52Z")

</div>

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](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 ?

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [November 9, 2017, 5:01pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/2 "2017-11-09T17:01:43Z")

</div>

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](http://aurelia.io/docs/) specially [Templating](http://aurelia.io/docs/templating)  
[Aurelia Collected Tutorials](https://discourse.aurelia.io/t/aurelia-collected-tutorials/204/5) specially Templating & User Interface sections  
[Beginning Aurelia](https://leanpub.com/beginning-of-aurelia)  
[Learning Aurelia](https://www.packtpub.com/web-development/learning-aurelia)  
[Aurelia Awesome](https://github.com/behzad888/awesome-aurelia) specially Aurelia Plugins

---

<div class="post-metadata">

**Author:** ![sean.hunter.aus](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sean.hunter.aus/32/17_2.png) [@sean.hunter.aus](https://discourse.aurelia.io/u/sean.hunter.aus)\
**Post date:** [November 10, 2017, 4:33am UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/3 "2017-11-10T04:33:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hadrienl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hadrienl/32/141_2.png) [@hadrienl](https://discourse.aurelia.io/u/hadrienl)\
**Post date:** [November 10, 2017, 7:47am UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/4 "2017-11-10T07:47:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 10, 2017, 9:50am UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/5 "2017-11-10T09:50:38Z")

</div>

> [@hadrienl](#):
>
> 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.

> **[Web Components in Aurelia - StageTwo - Deine Wohlfühloase](https://blog.stagetwo.eu/entry/2-web-components-in-aurelia/)**
>
> As stated in my last article, Web Components are a relative new way to build modern and reusable components. Even if the Web Components specifications are not implemented in some browsers like Firefox and Edge, there are ways to support them by using...

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

---

<div class="post-metadata">

**Author:** ![loaded02](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/loaded02/32/254_2.png) [@loaded02](https://discourse.aurelia.io/u/loaded02)\
**Post date:** [November 10, 2017, 10:46am UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/6 "2017-11-10T10:46:32Z")

</div>

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](https://developer.mozilla.org/de/docs/Web/Web_Components)

> 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](http://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](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.

---

<div class="post-metadata">

**Author:** ![tomasbonco](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomasbonco/32/35_2.png) [@tomasbonco](https://discourse.aurelia.io/u/tomasbonco)\
**Post date:** [November 10, 2017, 12:11pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/7 "2017-11-10T12:11:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 10, 2017, 12:20pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/8 "2017-11-10T12:20:50Z")

</div>

> [@tomasbonco](#):
>
> But the second one is quite easy. You don’t need any special stuff, or Aurelia processing.

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.

---

<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:** [November 10, 2017, 11:28pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/9 "2017-11-10T23:28:43Z")

</div>

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

> **[Bring your Gists to life with GistRun](https://gist.run/?id=4d2758b3d9223cdacd358ffaf79f39d2)**
>
> GistRun is a site for running, creating and updating GitHub Gists. With GistRun you can easily share Gists on StackOverflow.

---

<div class="post-metadata">

**Author:** ![hadrienl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hadrienl/32/141_2.png) [@hadrienl](https://discourse.aurelia.io/u/hadrienl)\
**Post date:** [November 13, 2017, 9:20am UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/10 "2017-11-13T09:20:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![loaded02](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/loaded02/32/254_2.png) [@loaded02](https://discourse.aurelia.io/u/loaded02)\
**Post date:** [January 9, 2018, 12:00pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/11 "2018-01-09T12:00:05Z")

</div>

I am referring to [Roadmap 2018 Web Component Export](http://blog.aurelia.io/2018/01/03/aurelia-2018-roadmap/). Has anyone a clue how [aurelia-web-components](https://github.com/aurelia/web-components) is supposed to be used?

---

<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:** [January 9, 2018, 12:07pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/12 "2018-01-09T12:07:34Z")

</div>

It’s Aurelia runtime + web components

---

<div class="post-metadata">

**Author:** ![loaded02](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/loaded02/32/254_2.png) [@loaded02](https://discourse.aurelia.io/u/loaded02)\
**Post date:** [January 9, 2018, 1:08pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/13 "2018-01-09T13:08:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adriatic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/adriatic/32/96_2.png) [@adriatic](https://discourse.aurelia.io/u/adriatic)\
**Post date:** [January 10, 2018, 11:24pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/14 "2018-01-10T23:24:30Z")

</div>

@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 😄

---

<div class="post-metadata">

**Author:** ![brylie](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brylie/32/46_2.png) [@brylie](https://discourse.aurelia.io/u/brylie)\
**Post date:** [December 3, 2018, 8:05am UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/15 "2018-12-03T08:05:50Z")

</div>

> [@adriatic](#):
>
> this last **update** indicates that is not abandoned

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

---

<div class="post-metadata">

**Author:** ![adriatic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/adriatic/32/96_2.png) [@adriatic](https://discourse.aurelia.io/u/adriatic)\
**Post date:** [December 3, 2018, 9:56pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/16 "2018-12-03T21:56:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [January 11, 2019, 5:42pm UTC](https://discourse.aurelia.io/t/aurelia-webcomponents/342/17 "2019-01-11T17:42:59Z")

</div>

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