Appearance
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 |