Using W3C Web Components

Sakai has elected the following libs to provide support for web components.

• Lit Element - https://lit-element.polymer-project.org
• Lit Html - https://lit-html.polymer-project.org/

Lit Element

Lit Element is a simple library which makes it easy to define Web Components – ideal for sharing elements across your organization or building a UI design system.

Probably the single best feature of web components for Sakai is that they can be used anywhere you use HTML: in essence they integrate with any existing web framework and so it matters not the ui framework that any particular tool is using.

Delightfully declarative

LitElement’s simple, familiar development model makes it easier than ever to build Web Components.

Express your UI declaratively, as a function of state. No need to learn a custom templating language – you can use the full power of JavaScript in your templates. Elements update automatically when their properties change.

Fast and light

Whether your end users are in emerging markets or Silicon Valley, they’ll appreciate that LitElement is extremely fast.

LitElement uses lit-html to define and render HTML templates. DOM updates are lightning-fast, because lit-html only re-renders the dynamic parts of your UI – no diffing required.

Seamlessly interoperable

LitElement follows the Web Components standards, so your components will work with any framework.

LitElement uses Custom Elements for easy inclusion in web pages, and Shadow DOM for encapsulation. There’s no new abstraction on top of the web platform.

Lit Html

Lit Html is a library for writing HTML templates in javascript and integrates easily with Lit Element. Probably it's greatest feature is that only updates (or re-renders) those templates where changes actually happen thereby making it very fast and efficient.

Efficient

lit-html is extremely fast. It uses fast platform features like HTML <template> elements with native cloning.

Unlike VDOM libraries, lit-html only ever updates the parts of templates that actually change - it doesn't re-render the entire view.

Expressive

lit-html gives you the full power of JavaScript and functional programming patterns.

Templates are values that can be computed, passed to and from functions and nested. Expressions are real JavaScript and can include anything you need.

lit-html supports many kind of values natively: strings, DOM nodes, heterogeneous lists, nested templates and more.

Extensible

lit-html is extremely customizable and extensible. Directives customize how values are handled, allowing for asynchronous values, efficient keyed-repeats, error boundaries, and more. lit-html is like your very own template construction kit.