diff --git a/.github/workflows/release-snapshot.yml b/.github/workflows/release-snapshot.yml index 570ae28e1cf..3825310c5af 100644 --- a/.github/workflows/release-snapshot.yml +++ b/.github/workflows/release-snapshot.yml @@ -1,7 +1,6 @@ name: 'Release - Snapshot' -on: - workflow_dispatch +on: workflow_dispatch jobs: test: diff --git a/packages/base/src/hooks/useStylesheet.ts b/packages/base/src/hooks/useStylesheet.ts index 54e04c58430..74b58a35104 100644 --- a/packages/base/src/hooks/useStylesheet.ts +++ b/packages/base/src/hooks/useStylesheet.ts @@ -2,6 +2,7 @@ import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js'; import { createOrUpdateStyle, removeStyle } from '@ui5/webcomponents-base/dist/ManagedStyles.js'; +import { getCurrentRuntimeIndex } from '@ui5/webcomponents-base/dist/Runtimes.js'; import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'; import { StyleStore } from '../stores/StyleStore.js'; import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js'; @@ -18,9 +19,10 @@ export function useStylesheet(styles: StyleDataCSP, componentName: string, optio ); useIsomorphicLayoutEffect(() => { + const scopedComponentName = `${componentName}-${getCurrentRuntimeIndex()}`; const shouldInject = options?.alwaysInject || !staticCssInjected; if (shouldInject) { - createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName); + createOrUpdateStyle(styles, 'data-ui5wcr-component', scopedComponentName); StyleStore.mountComponent(componentName); } @@ -29,7 +31,7 @@ export function useStylesheet(styles: StyleDataCSP, componentName: string, optio StyleStore.unmountComponent(componentName); const numberOfMountedComponents = componentsMap.get(componentName)!; if (numberOfMountedComponents <= 0) { - removeStyle('data-ui5wcr-component', componentName); + removeStyle('data-ui5wcr-component', scopedComponentName); } } };