Framework: use custom elements outside the framework

[olanod]

Can aurelia's custom elements be used outside of an aurelia application? something like polymer's elements?

[EisenbergEffect]

Not exactly, but neither can Polymer's entirely. Polymer basically has three layers: Polyfills (based on proposed standards), Prolyfills (things they like and might one day try to submit to a standards body but that aren't standards based at all) and Polymer Elements (basically a framework built on top of all of that stuff). So, in order to use Polymer elements you actually need all three layers...which last I checked is bigger than all of Aurelia.

Aurelia custom elements aren't built that way. Rather they are just handled by the html template compiler. But Aurelia can work with any Web Component, Polymer or otherwise. In order to use Aurelia's custom elements, you would have to bring in the entire framework, just like with Polymer.

Right now, there isn't an easy way to use just an element built with Aurelia inside of your app without your app being an Aurelia app. However, it would be possible to wrap Aurelia's custom elements up inside of a Web Component. We are considering doing this for the future. When we do that, you will be able to use them outside of an Aurelia app....but you would still need the framework infrastructure in order to make the elements work...just like Polymer.

I did a good amount of experimentation with Web Components. Unfortunately, there are a lot of flaws to the design. By not leveraging Web Components directly for Aurelia's elements, we were able to do a lot of things not possible with Web Components. Examples of that include using dependency injection, greater control over databinding and locally scoped elements.

Does that answer the question? Anything else I can help clarify there?

[olanod]

Yes thanks, that answers the question.
I still feel this should be possible, it's part of the philosophy of web components to create little isolated packages that you can distribute and use anywhere. Aurelia custom elements could try to depend in a smaller part of the framework or be pre-built to be easily integrated in other apps html-importing them or requiring them from js and letting the user register this elements manually in the DOM.
I'll be looking forward to see how things go in the future, keep up the good work.

[Serhioromano]

That is good feature but I do not think it is priority right now. I would target it to version 2 if at all accepted.

[EisenbergEffect]

We plan to do it eventually. But there's other things we need to take care of first. We'll leave this ticket open to track this and update on our progress.

[Serhioromano]

Would be nice if you start work with milestones. That would help visually see how close we are and what is planned for next releases. Also labels would be nice to see what is feature, what is bugs.

I think soon there will be very heavy traffic here very soon. So issues management is essential or it will quickly get ugly.

But I would definitely move this feature into the darkest corner for now.

[PascalPrecht]

@olanod Just to make things clear, if the browser supports all web component technologies, you don't need any polyfill at all.

So you really end up with Polymer as a dependency itself then, which is actually super thin. And so is aurelia.

[k2s]

Probably related to https://github.com/roguePanda/aurelia-polymer/issues/7.

[Robula]

Any news on this? I've just tried attempting this myself and I'm not even sure if it's possible.

[AshleyGrant]

It is not currently supported. This is on the roadmap, though.

[Alexander-Taran]

Pretty sure that when we get there there will be a giant billboard: "web components are here"

can be closed

[EisenbergEffect]

We've got a webcomponents library that turns aurelia elements into web components today. We haven't announced it, mainly because we're waiting for someone that cares enough about this feature to test it, provide feedback and help us fix any issues. So far, no takers.

[Alexander-Taran]

need a couple of hints on how to do that
barrier of entry

[EisenbergEffect]

Ok, I've published a 0.1.0 release of the web components plugin and added a bit of documentation in the readme on how to use it. It's never been tested, so it may not work at all. It was a first stab at the implementation I did a while back. It hasn't been touched in quite some time since we didn't have a lot of requests for it. I think now is the time to revisit this and get a working release out though. You can find it here: https://github.com/aurelia/web-components

Any bugs/features can be tracked against the dedicated repo.

[Alexander-Taran]

@EisenbergEffect thanks a lot.
I'll get my hands on it soon.