Skip to content

Web Components

Web Components LogoWeb 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 LogoStencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.

Storybook

Storybook LogoStorybook 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 LogoLit 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

LWC LogoLogoLightning 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/webcomponents

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

FeatureDescription
Easy to consumeBased on web standards - just HTML!
Future-proof.
Easy to add to your project.
LightweightTiny – come with a minimal footprint.
Modular – take only the parts you need.
Fast - built with performance in mind.
Enterprise ReadyImplement the SAP Fiori design language.
Feature-rich.
Secure, accessible, themeable, i18n-ready.
Framework CompatibilityUI5, Angular, Vue, React, Svelte.
Browser CompatibilityChrome, Firefox, Edge, Safari

To-Do List