{"ref":"capability:ui5-web-components","page":"/capabilities/ui5-web-components","json":"/capabilities/ui5-web-components.json","generated":"2026-10-26","drafted_with_ai":true,"entity":{"id":"ui5-web-components","name":"Web Components interop","domain":"ui-and-frontend-bridge","ecosystems":["ui5"],"universal":false,"description":"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.","short":"Using standards-based custom elements inside an app","core_coverage":{"state":"core-and-community","assessed_at":"2026-08-31","what_core_does":"A Web Component with Custom Elements metadata can be required and used like a regular control.","where_it_stops":"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.","community_adds":"SAP's own [@ui5/webcomponents](artifact:ui5-webcomponents) is the element set, and [@ui5/tooling-webc](artifact: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](artifact:ui5-community-ui5-webcomponents-bundle), and a frontend that renders unchanged abap2UI5 apps with the elements and no UI5 core in [abap2UI5 frontend-webcomponent](artifact:abap2ui5-frontend-webcomponent).","sources":[{"url":"https://ui5.sap.com/#/topic/1c80793df5bb424091954697fc0b2828","title":"SAPUI5 — Using Web Components","checked":"2026-08-31","quote":"Web Components integrate seamlessly into SAPUI5. A Web Component, especially a UI5 Web Component with its Custom Elements metadata, can be required and used like a regular SAPUI5 control."}],"relationship":"narrow-by-design"},"coverage_by_flavor":{"web-components":{"state":"core-only","assessed_at":"2026-09-14","what_core_does":"SAP publishes [UI5 Web Components](https://github.com/UI5/webcomponents) 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](https://github.com/UI5/webcomponents-react), that ships a Fiori-compliant React implementation over the same elements. An Angular wrapper, [ui5-webcomponents-ngx](https://github.com/SAP/ui5-webcomponents-ngx), existed too but is now deprecated in favour of Fundamental NGX.","where_it_stops":"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](capability:ui5-routing), [OData data binding](capability:ui5-data-binding), the [flexibility](capability:ui5-flexibility) layer and [launchpad plugins](capability:launchpad-plugins).","sources":[{"url":"https://github.com/UI5/webcomponents","title":"UI5/webcomponents — README","checked":"2026-09-14","quote":"…are not built on top of UI5, but rather lightweight and independent UI elements. …are not a successor of UI5, but rather a complementary offering. …bring the relevant UI5 qualities and SAP Fiori UX to the HTML level, usable with any web framework."},{"url":"https://github.com/UI5/webcomponents/tree/main/docs/3-frameworks","title":"UI5/webcomponents — docs/3-frameworks/README.md","checked":"2026-09-14","quote":"The idea is to build each UI element once as a UI5 Web Component and reuse it everywhere — React, Angular, Vue, OpenUI5/SAPUI5, and any other framework or plain HTML page."},{"url":"https://github.com/UI5/webcomponents-react","title":"UI5/webcomponents-react — README","checked":"2026-09-14","quote":"ui5-webcomponents-react is providing a Fiori-compliant React implementation by leveraging the UI5 Web Components."},{"url":"https://github.com/SAP/ui5-webcomponents-ngx","title":"SAP/ui5-webcomponents-ngx — README","checked":"2026-09-14","quote":"This library is deprecated and no longer actively maintained."}]}},"framing_by_flavor":{"web-components":{"description":"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](https://github.com/UI5/webcomponents) is the framework the app is built from, with SAP's own [React wrapper](https://github.com/UI5/webcomponents-react) and documented Angular and Vue paths, not a control borrowed from outside."}},"history":[{"date":"2026-09-14","field":"coverage_by_flavor.web-components","from":null,"to":"core-only","reason":"SAP publishes the UI5 Web Components library and its React wrapper directly; no artifact in the graph states the web-components flavor for this capability, and community-only or not-applicable would misstate what SAP ships here."},{"date":"2026-09-14","field":"framing_by_flavor.web-components","from":null,"to":"the flavor's own ground, not interop","reason":"The capability's cross-ecosystem description frames this as reaching a Web Component from inside a UI5 app; inside the web-components flavor the library itself is the app's framework, not something borrowed from outside it."},{"date":"2026-10-17","field":"description","from":"Using standards-based custom elements inside a UI5 app, and the question of which control set an app should be built from at all.","to":"Using standards-based custom elements inside an app, and the question of which control set an app should be built from at all.","reason":"Keep the default capability wording neutral; preserve the previous wording in framing_by_ecosystem.ui5. Maintainer-requested scope audit."},{"date":"2026-10-26","field":"core_coverage.community_adds","from":null,"to":"SAP's own @ui5/webcomponents element set and the deprecated @ui5/tooling-webc wrappers, plus a community script-tag bundle and an abap2UI5 frontend rendering with the elements.","reason":"Reassessed against the graph (check:capabilities): providers that arrived after 2026-08-31 and shape the answer were not named. State core-and-community is unchanged."}],"drafted_with_ai":true,"framing_by_ecosystem":{"ui5":{"description":"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_delivery":{"door":"ui5","all":{"built_in":[],"documented_pattern":[],"announced":[],"packages":[{"ref":"artifact:openui5-core","name":"@openui5/sap.ui.core","json":"/artifacts/openui5-core.json"},{"ref":"artifact:ui5-tooling-webc","name":"@ui5/tooling-webc","json":"/artifacts/ui5-tooling-webc.json"},{"ref":"artifact:ui5-webcomponents","name":"@ui5/webcomponents","json":"/artifacts/ui5-webcomponents.json"}]},"by_flavor":{"freestyle":{"built_in":[],"documented_pattern":[],"announced":[],"packages":[{"ref":"artifact:openui5-core","name":"@openui5/sap.ui.core","json":"/artifacts/openui5-core.json"}]},"fiori-elements":null,"web-components":{"built_in":[],"documented_pattern":[],"announced":[],"packages":[{"ref":"artifact:ui5-webcomponents","name":"@ui5/webcomponents","json":"/artifacts/ui5-webcomponents.json"}]}}},"edges":{"use_cases":[],"shared_tasks":[],"related_tasks":[],"options":[{"ref":"artifact:openui5-core","name":"@openui5/sap.ui.core","json":"/artifacts/openui5-core.json","ecosystem":"ui5","origin_ring":"sap-official"},{"ref":"artifact:ui5-tooling-webc","name":"@ui5/tooling-webc","json":"/artifacts/ui5-tooling-webc.json","ecosystem":"ui5","origin_ring":"sap-official"},{"ref":"artifact:ui5-webcomponents","name":"@ui5/webcomponents","json":"/artifacts/ui5-webcomponents.json","ecosystem":"ui5","origin_ring":"sap-official"},{"ref":"artifact:abap2ui5-frontend-webcomponent","name":"abap2UI5 frontend-webcomponent","json":"/artifacts/abap2ui5-frontend-webcomponent.json","ecosystem":"abap","origin_ring":"community-org"},{"ref":"artifact:ui5-community-ui5-webcomponents-bundle","name":"ui5-webcomponents-bundle","json":"/artifacts/ui5-community-ui5-webcomponents-bundle.json","ecosystem":"ui5","origin_ring":"community-org"}],"samples":[{"ref":"artifact:sap-samples-ai-seamless-integration","name":"SAP-samples/ai-seamless-integration","json":"/artifacts/sap-samples-ai-seamless-integration.json"},{"ref":"artifact:sap-samples-fundamental-ngx-sample-apps","name":"SAP-samples/fundamental-ngx-sample-apps","json":"/artifacts/sap-samples-fundamental-ngx-sample-apps.json"},{"ref":"artifact:sap-samples-uxc-integration","name":"SAP-samples/uxc-integration","json":"/artifacts/sap-samples-uxc-integration.json"},{"ref":"artifact:lemaiwo-ui5-space-webcomponent-library","name":"ui5-space-webcomponent-library","json":"/artifacts/lemaiwo-ui5-space-webcomponent-library.json"},{"ref":"artifact:lemaiwo-ui5-space-webcomponent-package","name":"ui5-space-webcomponent-package","json":"/artifacts/lemaiwo-ui5-space-webcomponent-package.json"},{"ref":"artifact:ui5-community-showcase-ui5-tsapp-webc","name":"ui5-tsapp-webc","json":"/artifacts/ui5-community-showcase-ui5-tsapp-webc.json"},{"ref":"artifact:sap-samples-ui5-webcomponents-ngx-sample","name":"ui5-webcomponents-ngx-sample","json":"/artifacts/sap-samples-ui5-webcomponents-ngx-sample.json"}],"explained_by":[],"normative_context":[]}}