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'; +// ... +``` +