Web Components interop

In freestyle SAPUI5 this capability is interop: a Web Component reached into from a UI5 app built on OpenUI5. In this flavor it is the app itself: UI5 Web Components is the framework the app is built from, with SAP's own React wrapper and documented Angular and Vue paths, not a control borrowed from outside.

Showing artifacts, examples and content with confirmed Web Components applicability. View All UI5

Overview

SAP SHIPS

SAP publishes UI5 Web Components itself as the element set this flavor is built from, with official tutorials for React, Angular and Vue and a dedicated React wrapper, UI5 Web Components for React, that ships a Fiori-compliant React implementation over the same elements. An Angular wrapper, ui5-webcomponents-ngx, existed too but is now deprecated in favour of Fundamental NGX.

Not covered: It stops at the elements: the project states it is 'not built on top of UI5' and 'not a successor of UI5', but a complementary, lightweight offering usable with any web framework. The concerns freestyle UI5 answers stay outside it: routing, OData data binding, the flexibility layer and launchpad plugins.

SourceUI5/webcomponents — READMEchecked
THE COMMUNITY ADDS

Artifacts3

3 of 3 artifacts
ArtifactSignals
Packages3
@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 working6

ArtifactSignals
Samples6
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 only, UI5, Web Components
assessed
For your agent
Ref
capability:ui5-web-components
JSON
/capabilities/ui5-web-components.json
MCP
Connecting an agent