Today, we're excited to announce the beta of Aurelia's Web Components plugin, enabling you to use your Aurelia custom elements as Web Component standard custom elements, easily inter-operating with other frameworks.

Aurelia has always valued strong web standards usage. That's why when we launched Aurelia over four years ago we leveraged native HTML templates and Shadow DOM, two of the three major features under the Web Components umbrella at the time. However, we didn't feel that for application development there was a benefit to utilizing the emerging custom element API of the browser. In fact, in common application scenarios, it had a negative effect. This stems from initial use cases the W3C had for Web Component custom elements, which were mostly oriented around sharing of individual widgets, rather than building out full apps. However, we still wanted to support this standard. To that end, our plan was always to provide a plugin that would enable seamless sharing by transforming Aurelia elements into Web Component custom elements via a simple API. It's that plugin that we're announcing today.

To use the Aurelia Web Components plugin, first install it via NPM:

npm install aurelia - web - components -- save

With that in place, we can configure the plugin:

import { CustomElementRegistry } from 'aurelia-web-components' ; export async function configure ( aurelia ) { aurelia . use . basicConfiguration ( ) . globalResources ( 'resources/my-component' ) ; await aurelia . start ( ) ; const registry = aurelia . container . get ( CustomElementRegistry ) ; registry . useGlobalElements ( ) ; }

The code above tells Aurelia to register a global element located in the resources folder, named my-component . It then uses our new plugin to make all of our known global Aurelia elements into standard Web Component custom elements. That's done with the registry's call to useGlobalElements() .

Using this technique you can bundle up your Aurelia elements as Web Components for anyone to use. That's all there is to it.

For more information on this plugin, have a read through the readme file on the repo. As we move through the beta period, we'll be adding this documentation to the official plugins section of the site.

This month we also had a number of other releases to Aurelia's core, plugins, and tools. There are two items of particular note:

Aurelia CLI - With the latest CLI release (1.0.0-beta.15), we now have an option to scaffold a plugin project, in addition to scaffolding an application. To create a plugin project, simply execute au new --plugin .

- With the latest CLI release (1.0.0-beta.15), we now have an option to scaffold a plugin project, in addition to scaffolding an application. To create a plugin project, simply execute . Virtual Scrolling - We've been working hard on our virtual scrolling plugin to make it ever more versatile, allowing it handle different dom structures, CSS, and edge case rendering.

Details on these update and all other libraries are available below.

Cheers!