onedevatlasBeta
Browse the atlas
AllUI5CAPABAPBTP
CapabilityUI & Frontend Bridge

Web Components interop

Using standards-based custom elements inside an app, and the question of which control set an app should be built from at all, two concerns that are often answered as one.

Overview

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

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

Group by5 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