Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Specifications

Web components are based on four main specifications:

Custom Elements

The Custom Elements specification lays the foundation for designing and using new types of DOM elements.

Shadow DOM

The shadow DOM specification defines how to use encapsulated style and markup in web components.

ES Modules

The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.

HTML Template

The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

Libraries

Stencil

Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.

Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

Lit

Lit is a simple library for building fast, lightweight web components.

LitElement uses lit-html to render into the element's Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html.

SAPUI5 uses lit-html as the thirparty renderer inside the library sap.ui.webc for rendering UI5 Web Components from within.

LWC

Lightning Web Components (LWC) is an open-source UI framework developed at Salesforce. You can use LWC to customize Salesforce, but you can also use LWC to build any web app.

Design Systems

The following design systems use Storybook for documentation.

UI5 Web Components

UI5 Web Components are framework-independent UI elements incorporating the SAP Fiori design, adding Enterprise-flavored sugar on top of native APIs!

Feature	Description
Easy to consume	Based on web standards - just HTML! Future-proof. Easy to add to your project.
Lightweight	Tiny – come with a minimal footprint. Modular – take only the parts you need. Fast - built with performance in mind.
Enterprise Ready	Implement the SAP Fiori design language. Feature-rich. Secure, accessible, themeable, i18n-ready.
Framework Compatibility	UI5, Angular, Vue, React, Svelte.
Browser Compatibility	Chrome, Firefox, Edge, Safari

To-Do List

Design System Stadt Zürich

The Design System defines the appearance and behavior of web pages and web applications for Stadt Zürich.

Feature	Description
Generator	Components are made with Stencil and can be lazyloaded.
Framework Compatibility	Angular, Vue, React, Svelte.
Theming	Themeable with CSS Properties.
Browser Compatibility	Supported browsers: >= 1% usage in Switzerland.

All new applications for Stadt Zürich must be developed using this web components.