chore: warn when scoping suffix is set too late (#10781)

chore: log warning when using scoping suffix

packages/base/src/CustomElementsRegistry.ts

@@ -19,6 +19,10 @@ const isTagRegistered = (tag: string) => {
 	return Definitions.has(tag);
 };
 
+const hasRegisteredTags = () => {
+	return Definitions.size > 0;
+};
+
 const getAllRegisteredTags = () => {
 	return [...Definitions.values()];
 };
@@ -93,6 +97,7 @@ const displayFailedRegistrations = () => {
 export {
 	registerTag,
 	isTagRegistered,
+	hasRegisteredTags,
 	getAllRegisteredTags,
 	recordTagRegistrationFailure,
 };

packages/base/src/CustomElementsScopeUtils.ts

@@ -1,3 +1,4 @@
+import { hasRegisteredTags } from "./CustomElementsRegistry.js";
 import VersionInfo from "./generated/VersionInfo.js";
 
 let suf: string;
@@ -16,7 +17,9 @@ const tagsCache = new Map<string, boolean>(); // true/false means the tag should
 
 /**
  * Sets the suffix to be used for custom elements scoping, f.e. pass "demo" to get tags such as "ui5-button-demo".
- * Note: by default all tags starting with "ui5-" will be scoped, unless you change this by calling "setCustomElementsScopingRules"
+ *
+ * **Note:** By default all tags starting with "ui5-" will be scoped, unless you change this by calling "setCustomElementsScopingRules"
+ * **Note:** Setting the scoping suffix must be done before importing any components.
  *
  * @public
  * @param suffix The scoping suffix
@@ -26,6 +29,11 @@ const setCustomElementsScopingSuffix = (suffix: string) => {
 		throw new Error("Only alphanumeric characters and dashes allowed for the scoping suffix");
 	}
 
+	if (hasRegisteredTags()) {
+		// eslint-disable-next-line no-console
+		console.warn("Setting the scoping suffix must be done before importing any components. For proper usage, read the scoping section: https://github.com/SAP/ui5-webcomponents/blob/main/docs/2-advanced/06-scoping.md.");
+	}
+
 	suf = suffix;
 };