onedevatlasBeta
Browse the atlas
AllUI5CAPABAPBTP
All UI5FreestyleFiori elementsWeb Components
CapabilityUI & Frontend Bridge

Web Components interop

Using standards-based custom elements inside a UI5 app, and the question of which control set an app should be built from at all.

Overview

SAP SHIPSby design
Freestyle →

@openui5/sap.ui.core The OpenUI5 core: the module loader, the MVC runtime, data binding, routing, theming and the test stack, which is everything a UI5 app does before a single community package is added.

Web Components →

@ui5/webcomponents SAP's UI elements as standard custom elements, ui5-button among them, implementing SAP Fiori design and usable from plain HTML, React, Angular or Vue.

Not covered: It stops at interop. The framework integrates Web Components; it does not answer whether an app should be built from UI5 controls, UI5 Web Components, or the React wrappers over them.

SourceSAPUI5 — Using Web Componentschecked
THE COMMUNITY ADDS

SAP's own @ui5/webcomponents is the element set, and @ui5/tooling-webc generated UI5 library wrappers for it until its maker deprecated it. The community adds a script-tag bundle of the elements in ui5-webcomponents-bundle, and a frontend that renders unchanged abap2UI5 apps with the elements and no UI5 core in abap2UI5 frontend-webcomponent.

ui5-webcomponents-bundle

Artifacts5

5 of 5 artifacts
ArtifactSignals
Build tools1
@ui5/tooling-webcDeprecated UI5 Tooling extensions for UI5 Web Components wrappers
Signals
Archived
Packages4
@openui5/sap.ui.coreFramework core: module loader, MVC runtime, binding, routing, theming
Signals
none
@ui5/webcomponentsSAP's UI elements as standard custom elements
Signals
Functional boundary
abap2UI5 frontend-webcomponentabap2UI5 frontend rendering with UI5 Web Components
Signals
Functional boundary
ui5-webcomponents-bundleCustom UI5 Web Components bundle loaded with one script tag
Signals
none

Seen working7

ArtifactSignals
Samples7
SAP-samples/ai-seamless-integrationUI5 Web Components AI patterns embedded in an OpenUI5 app
none
SAP-samples/fundamental-ngx-sample-appsAngular performance-review demo of Fundamental NGX components
none
SAP-samples/uxc-integrationUI5 Web Components shell bar and navigation inside an OpenUI5 app
none
ui5-space-webcomponent-libraryUI5 library wrapping a UI5 Web Components package, step by step
none
ui5-space-webcomponent-packageStep-by-step UI5 Web Components package in TypeScript
none
ui5-tsapp-webcTypeScript UI5 app consuming @ui5/webcomponents
none
ui5-webcomponents-ngx-sampleDemo app for @ui5/webcomponents-ngx, UI5 Web Components for Angular
none

Details

Coverage
statecore and community, UI5
assessed
relationshipnarrow by design
domainUI & Frontend Bridge
SourceSAPUI5 — Using Web Componentschecked
For your agent
Ref
capability:ui5-web-components
JSON
/capabilities/ui5-web-components.json
MCP
Connecting an agent