Custom Elements

The goal of proposals like Web Components, and frameworks likeReact, Vue, and Angular, is to let developers create custom componentsthat encapsulate data and can be called to reproduce specific output.

Jael also supports defining elements; in fact, they are analogousto defining functions in Dart code.

The benefit of defining custom elements in Jael as opposed to ina client-side framework is that they build directly to standard HTML,and require no additional features in an end-user’s browser.

The best practice is to define elements in their own file, so thatthey can be imported into the scope using an tag:

You might have noticed that in the earlier example, some attributes ofthe todo-item were prefixed with an arroba (), while others were not.There is, of course, a reason for this.

When rendering a custom element, attributes with the @ are injectedinto the custom element’s scope. This is analogous to passing argumentsto a function.

Directives like and for-each also work with custom elements,of course.

By default, custom elements are replaced with a div. There maybe times you wish to override this, for example, to render a todo-itemas an a element.

Use the special attribute to facilitate this: