From 7841ca5a9eb4afcc51fab94ffc15f8a49236b058 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 12 Jun 2025 10:14:14 +0200 Subject: [PATCH] docs: mention scoping in FAQ and Migration Guide --- docs/MigrationGuide.mdx | 3 +++ docs/knowledge-base/FAQ.mdx | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index cd354844369..37a05fe5882 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -24,6 +24,9 @@ For a complete list of breaking changes in UI5 Web Components, please refer to t _**Note:** Our `codemod` covers changes from ui5-webcomponents as well._ +_**Note:** Setting the scoping suffix should be done before importing any components, as they use the suffix at the top-level of the module - meaning when a component is imported, the suffix has to be known. +For this to work, calling the method should be done in a separate module (e.g. scoping-config.js) and this module should be imported before any components are imported._ + ## Codemod To make the migration to UI5 Web Components (for React) v2 easier, diff --git a/docs/knowledge-base/FAQ.mdx b/docs/knowledge-base/FAQ.mdx index 24878aae275..12be5e0b999 100644 --- a/docs/knowledge-base/FAQ.mdx +++ b/docs/knowledge-base/FAQ.mdx @@ -86,4 +86,23 @@ Each component developed by the UI5 Web Components team ([`ui5-webcomponents`](h If a component does not have this note, it is a React-only component provided exclusively by `ui5-webcomponents-react`. +## Scoping + +Starting from UI5 Web Components (for React) 2.0.0, the order if imports with regards to scoping and components matters. +Setting the scoping suffix must be done before importing any components, as they use the suffix at the top-level of the module - meaning when a component is imported, the suffix has to be known. +For this to work, calling the method should be done in a separate module (e.g. scoping-config.js) and this module should be imported before any components are imported. +You can find more information about this in the [UI5 Web Components documentation](https://sap.github.io/ui5-webcomponents/docs/advanced/scoping/). + +```ts +// scoping-config.js +import { setCustomElementsScopingSuffix } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; +setCustomElementsScopingSuffix('demo'); + +// app main file, e.g index.js, main.tsx, etc. +import './scoping-config.js'; +// now, all other component imports - the scoping config import must be the first import of the app +import { Button } from '@ui5/webcomponents-react'; +// ... +``` +